大佬教程收集整理的这篇文章主要介绍了jquery – 动态分组SVG元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这就是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)上试用了相同的结果
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命名空间.
以上是大佬教程为你收集整理的jquery – 动态分组SVG元素全部内容，希望文章能够帮你解决jquery – 动态分组SVG元素所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。