我正在尝试将某些 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 命名空间。
关于jquery - 动态分组 SVG 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12548386/