动态分组SVG元素

Question

我试图动态地包裹某些svg元素,例如rect,text等成一个单一的g使用JavaScript(jQuery的)

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

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

脚本(根据我收到的有用答案@ 在树中间插入(g)节点(SVG),使用jQuery),我用它来包装到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)上试用了相同的结果

Answer 1

我认为原因是 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 优秀的 JQuery 插件成功操作 SVG 元素。您可能想看一下。

这个答案更详细地讨论了 SVG 和 HTML 命名空间。