我试图使用
javascript(jQuery)动态地将某些svg元素(如rect,text等)包装到单个g中
这就是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)上试用了相同的结果
解决方法
我相信原因是由于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’s excellent JQuery plugin成功操作SVG元素.您可能想看一下.
This answer更详细地讨论了SVG和HTML命名空间.