插入一个 <g> 通过jQuery在SVG中标记

Question

I try to intercalate a element in my SVG to add a layer in my SVG DOM. The SVG is embeded in a HTML5.

When I do this, the moved element disapears from the HTML. what's wrong?

To see it live, have a look here: http://bl.ocks.org/daohodac/raw/6db306dcb5d66d913f5c/ and click the button to perform the script

here is the initial SVG with the polygon visible:

<svg ...attributes...>
  <g id="zoom_anim" ...attributes...>
    <polygon ...attributes...></polygon>
  </g>
</svg>

here is what I have after the script (I can see it in chrome inspector) with the polygon invisible

<svg ...attributes...>
  <g id="zoom_anim_parent_bbsmashed">
    <g id="zoom_anim" ...attributes...>
      <polygon ...attributes...></polygon>
    </g>

</svg>

and here is the script

<script>
 var intercalate = function() {
  var zoomParentId = "zoom_anim_parent_bbsmashed";
  var gId = "#zoom_anim";
  $(gId).parent().append($("<g id='"+zoomParentId+"'>"));
  var that = $(gId).detach().appendTo("#"+zoomParentId);
 };
</script>

Answer 1

Be careful using jQuery with SVG. SVG nodes are not the same as XHTML nodes, and some of the jQuery API doesn't work correctly with SVG. To create an SVG node, you should use document.createElementNS('http://www.w3.org/2000/svg', 'g') . You could also use an SVG library like d3 or snap ; both offer a comprehensive API to work with SVG nodes.