jquery – 动态分组SVG元素

我试图使用 javascript(jQuery)动态地将某些svg元素(如rect,text等)包装到单个g中

这就是svg最初看起来的样子

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

我用来包装到g标签的脚本(基于我收到的有用答案@ Inserting a (g) node in the middle of a tree (SVG) using jQuery).

$("#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();适用于sometime cases但not all

问题：

>为什么动态创建的g默认隐藏？
>为什么$(“#parent”).show()工作不一致？
>是否有另一种(更好的)动态分组分组元素的方法？
>我对SVG很新,但对jQuery和DOM操作相对比较舒服.我将SVG视为另一个标签错误的方式是什么？

在Firefox(15.0.1)和Chrome(21.0.1180.89)上试用了相同的结果

解决方法

我相信原因是由于SVG实际上位于包含HTML的不同命名空间内.当您将HTML片段传递给JQuery(在您的情况下为< g id =“parent”/>)时,它将在HTML文档的命名空间中创建,而不是在SVG中创建.

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使用Keith Wood’s excellent JQuery plugin成功操作SVG元素.您可能想看一下.

This answer更详细地讨论了SVG和HTML命名空间.