IE9將svg附加到DOM當你有自定義的命名空間

我有這個問題，我堅持了幾天現在。我想附加一個SVG的DOM。我有自定義的命名空間，當它們被添加到DOM中，並且你試圖獲得你追加它們的父元素的innerHTML屬性時，你會得到它們一些隨機的命名空間。這隻發生在IE9中。IE9將svg附加到DOM當你有自定義的命名空間

例子：

$(document).ready(function() { 
var svg = '<svg xmlns="http://www.w3.org/2000/svg" ns:attr="val" />'; 
alert($("div").append(svg).html()); 
});

輸出將是：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:a:b="val" />

任何想法，怎麼會這樣來解決？我試圖定義名稱空間，但它不再工作。這裏有一個jsfiddle鏈接http://jsfiddle.net/RwNqk/3/

在此先感謝。

來源

2012-08-15 user1600603

我沒有得到NS1：a：b =「val」'， NS1：NS：ATTR = 「VAL」'。你不能在HTML中使用自定義的命名空間（text/html serialization），所以無論你做什麼，它都是錯誤的。 – Alohci 2012-08-15 13:55:24

首先，您的JSFiddle中有一個HTML文檔—，而不是XHTML —。 HTML沒有自定義名稱空間，只有XML/XHTML有。

其次，您正在使用ns名稱空間前綴，而未定義該名稱空間。其他瀏覽器完全可以工作，這是一個奇蹟。

第三，即使你解決這些問題，你（不幸）can't use jQuery to jam elements into the DOM using previously-defined namespace prefixes：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="hello"><head> 
    <title>Using jQuery to add namespaced attribute</title> 
</head><body> 
    <div><p foo:bar="yes">one</p></div> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript"><![CDATA[ 
    var xhtml = '<p foo:bar="no">two</p>'; 
    alert($('div').html()); 
    try{ $('div').append(xhtml); } 
    catch(e){ alert(e);   } 
    ]]></script> 
</body></html>

第一個警報顯示，自定義命名空間的工作原理：
<p xmlns="http://www.w3.org/1999/xhtml" foo:bar="yes" xmlns:foo="hello">one</p>

第二警報顯示故障：

[Firefox] "An invalid or illegal string was specified" code: "12" 
[Chrome] Error: SYNTAX_ERR: DOM Exception 12 
[IE9]  DOM EXception: SYNTAX_ERR (12)

這與IE9或SVG無關。它主要與jQuery有關。（您可以在IE9和FF中設置DOM元素的.innerHTML，它將按需要工作，但不能與Chrome一起工作。）

來源

2012-08-15 15:42:19 Phrogz

IE9將svg附加到DOM當你有自定義的命名空間

回答

相關問題