动态分组SVG元素 [英] Grouping SVG elements dynamically

问题描述

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

这是svg看起来最初

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

脚本（根据我收到的有用答案@ ，但 并非全部

问题：

• 为什么动态创建的 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）点击（function（）{
 var el = document.createElementNS '$'$'$'$'$'$'$'$'$'$' ）; 
 $（＃container svg> *）。wrapAll（$ el）; 
}）; 
  

我以前使用JQuery成功地使用 Keith Wood优秀的JQuery插件。你可能想看看这个。

这个答案更详细地讨论SVG和HTML命名空间。

I am trying to dynamically wrap certain svg elements like rect,text,etc into a single g using javascript (jQuery)

This is how the svg looks initially

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

The script (based on the helpful answers I received @ Inserting a (g) node in the middle of a tree (SVG) using jQuery) that I use to wrap into the g tag.

$("#container svg > *").wrapAll('<g id="parent" />');

The transformed svg looks like this

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

But nothing shows up on the UI. Even firebug shows the g to be grayed out (like it does for hidden elements).

calling $("#parent").show(); works in sometime cases but not all

Questions:

• Why does the g that is dynamically created, hidden by default?
• Why does $("#parent").show() work inconsistently?
• Is there another (better) way of grouping grouping elements dynamically?
• I am totally new to SVG, but relatively comfortable with jQuery and DOM manipulation. Is the way that I am treating SVG as just-another-tag wrong?

Tried on both Firefox (15.0.1) and Chrome (21.0.1180.89) with same results

解决方案

I believe the reason is due to the fact that the SVG is actually resides inside a different namespace to the containing HTML. When you pass a HTML fragment to JQuery (<g id="parent" /> in your case) it is created in the namespace of the HTML document and not the SVG.

JQuery isn't really suited to creating and manipulating non-HTML elements, although you could achieve a half-way house by using a combination of 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);
});

I've previously used JQuery to successfully manipulate SVG elements using Keith Wood's excellent JQuery plugin. You may want to take a look at that.

This answer discusses SVG and HTML namespaces in more detail.

这篇关于动态分组SVG元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！