11

JavaScript DOM API のXMLSerializerを使用して、SVG 要素をその代表的なマークアップに変換しようとしています。

これは、要素を作成してシリアル化するために使用される基本的なコードです。

var el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
el.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
el.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');

var markup = (new XMLSerializer()).serializeToString(el);
console.log(markup);

Chrome、Firefox、Safari、Opera では、必要なものが生成されます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>

しかし、Internet Explorer 9 から IE11 では、次のようになります。

<svg xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" />

IE の出力には 2 つの問題があります。

  1. xmlns属性が重複しています。JavaScript の 2 行目を省略した場合、IE ではマークアップに属性が 1 つしかありませんxmlnsが、Firefox、Chrome、Safari、Opera では属性がありません。
  2. 追加しますxml:NS1=""。どうしてこれなの？NS1:属性の前に付けられxmlns:xlinkます。

属性を正しい方法で作成していると思います。たとえば、setAttribute代わりに使用することsetAttributeNSはここでは正しい (詳細) であり、これを変更しても問題は解決しないようです。

任意の洞察をいただければ幸いです。

編集:関連する問題では、名前空間の省略につながる Chrome のシリアル化のバグについて説明しています。最初の問題には部分的に関連しますが (他のすべてのブラウザーは同じように動作します)、2 番目の問題には関連しません。

4

1 に答える 1

15

わかりました、私はそれを解決したと思います。この投稿からこのWebKit バグ レポートおよびこのテスト ケースまでの道のりをたどりました。

スクリプトをこれに変更すると、機能します。

var el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
el.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
el.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');

var markup = (new XMLSerializer()).serializeToString(el);
console.log(markup);

ああ、名前空間。

ただし、Safari 6.05 および PhantomJS にまだ存在する古いバージョンの WebKit では失敗します (バグ レポート- 現在修正済み)。おそらく、修正は最新の Safari アップデートに組み込まれています (まだ確認していません)。

于 2013-10-26T18:25:27.863 に答える