仅在字符串中复制svg的子元素

Question

我有这样的动态svg：

<svg xmlns="http://www.w3.org/2000/svg" id="mysvg" style="cursor: crosshair; width: 1792px; height: 1280px;">
<line id="2014_5_5_14_30_37_Line" x1="100.44444444444444" y1="190.14814814814815" x2="235.55555555555554" y2="429.55555555555554" stroke-width="5" stroke="#00ff00" opacity="1.0" Username="UserName" CurrentDate="30/05/2014" stroke-opacity="1" style="cursor: move;"/>
<polyline id="2014_5_5_14_30_38_polyline" stroke-width="5" stroke="#00ff00" opacity="1" Username="UserName" CurrentDate="30/05/2014" points="268.74074074074076,199.62962962962962,493.9259259259259,164.07407407407408,605.3333333333334,289.7037037037037,548.4444444444445,408.22222222222223,368.2962962962963,334.74074074074076,368.2962962962963,334.74074074074076" stroke-opacity="1" style="fill: none; cursor: move;"/>
<g id="2014_5_5_14_30_43_gRect">
<rect Username="UserName" CurrentDate="30/05/2014" x="866.074074074074" y="164.07407407407408" id="2014_5_5_14_30_43_Rect" width="270.2222222222223" height="168.2962962962963" fill="#FFF" stroke-width="5" stroke="#00ff00" fill-opacity="0.3" style="fill: rgb(255, 255, 255); cursor: move;"/>
<foreignObject x="866.074074074074" y="164.07407407407408" width="270.2222222222223" height="168.2962962962963" id="2014_5_5_14_30_43_Rect_f">
<div xmlns="http://www.w3.org/1999/xhtml" color="black" style="font-family: arial; font-size: 20px; font-style: normal; text-align: center; vertical-align: middle;">some text
</div>
</foreignObject>
</g>
</svg> 

我想通过JavaScript或Jquery函数在字符串中的<svg> and </svg>标记内获取所有内容。

现在我正在这样做：

var svg = document.getElementById('mysvg');
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svg);
alert(str);

但这会输出整个svg元素，即来自“ <svg...</svg> ”。 在这种情况下，我希望输出为“ <line....</g> ”。 我尝试使用svg.getElementsByTagName('*') ，但似乎无法获得想要的输出。

JQuery或javascript中是否有类似innerSVG的内容？

Answer 1

function svgInnerHTML (svg) {
  // Chrome, Firefox, etc.
  if (svg.innerHTML) {
    return svg.innerHTML;
  }

  // Safari case
  var serializer = new XMLSerializer();
  var str = '';
  var children = svg.childNodes;

  for (var i = 0, len = children.length; i < len; i += 1) {
    str += serializer.serializeToString(children[i]);
  }

  return str;
}

Answer 2

为什么不使用：

var svg = document.getElementById('mysvg');
alert(svg.innerHTML);

看到这个小提琴：

http://fiddle.jshell.net/Um5yf/

Answer 3

如果浏览器支持带有svg元素的innerHTML，请使用innerHTML；否则，请使用XMLSerializer获取XML字符串，并删除begin标记和end标记。

function innerSVG (node) {
  return node.childNodes[0] ? (node.innerHTML || (new XMLSerializer()).serializeToString(node).replace(/^<[^>]+>|<[^>]+>$/g,'')) : '';
}