5

我正在尝试使用javascript（jQuery）将某些svg元素（如rect，text等）动态包装成一个单一的元素g

这是 svg 最初的样子

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

我用来包装到标签中的脚本（基于我收到的有用答案@Inserting a (g) node in the middle of a tree (SVG) using 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) 上都试过了，结果相同

4

1 回答 1

2

我相信原因是由于 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 命名空间。

于 2012-09-24T16:24:51.190 回答