jquery之动态分组 SVG 元素

我正在尝试将某些 svg 元素(如 rect、text 等)动态包装到单个 g 中使用 JavaScript (jQuery)

这就是 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> 

但用户界面上没有显示任何内容。甚至 firebug 也会显示 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 元素，尽管您可以通过使用 native 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 命名空间。