5

javascript（jQuery）を使用して、などの特定の要素を1つにsvg動的にラップしようとしていますrecttextg

これは、svgが最初にどのように見えるかです

<div id="container">
   <svg ...>
     <rect .../>
     <circle .../>
     <text ...>...</text>
   </svg>
</div>

タグにラップするために使用するスクリプト（ jQueryを使用してツリー（SVG）の真ん中に（g）ノードを挿入する@で受け取った役立つ回答に基づく）。g

$("#container svg > *").wrapAll('<g id="parent" />');

変形svgはこんな感じ

<div id="container">
   <g id="parent">
     <svg ...>
       <rect .../>
       <circle .../>
       <text ...>...</text>
     </svg>
   </g>
</div>

しかし、UIには何も表示されません。ファイアバグでさえ、gがグレー表示されていることを示しています（非表示の要素の場合と同様）。

ここに画像の説明を入力してください

呼び出し$("#parent").show();は時々機能しますが、すべてではありません

質問：

  • なぜgそれが動的に作成され、デフォルトで非表示になっているのですか？
  • なぜ$("#parent").show()一貫性のない動作をするのですか？
  • グループ化要素を動的にグループ化する別の（より良い）方法はありますか？
  • 私はSVGにまったく慣れていませんが、jQueryとDOMの操作には比較的慣れています。私がSVGを単なる別のタグとして扱っている方法は間違っていますか？

Firefox（15.0.1）とChrome（21.0.1180.89）の両方で試してみましたが、同じ結果になりました

4

1 に答える 1

2

その理由は、SVGが実際には含まれているHTMLとは異なる名前空間内にあるという事実によるものだと思います。HTMLフラグメントをJQuery（<g id="parent" />あなたの場合）に渡すと、SVGではなくHTMLドキュメントの名前空間に作成されます。

JQueryは、HTML以外の要素の作成と操作にはあまり適していませんが、ネイティブJavaScriptとJQueryを組み合わせて使用​​することで、中途半端な状態を実現できます。

$("#btn").click(function() {
    var el = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    var $el = $(el);
    $el.attr('id', 'parent');
    $("#container svg > *").wrapAll($el);
});

私は以前、JQueryを使用して、KeithWoodの優れたJQueryプラグインを使用してSVG要素を正常に操作しました。あなたはそれを見てみたいと思うかもしれません。

この回答では、SVGおよびHTML名前空間について詳しく説明しています。

于 2012-09-24T16:24:51.190 に答える