如何使用jQuery或JavaScript从html页面获取SVG代码？

Question

我有svg这样的简单HTML页面：

<div id="plan">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="layer3">
   <rect width="105.71429" height="80" x="351.42856" y="152.36218" id="rect1" style="fill:#008000"></rect>
   <rect width="120" height="85.714287" x="500" y="389.50504" id="rect2" style="fill:#008000"></rect>
</g>
</svg>
</div>

我如何获得字符串：

<rect width="105.71429" height="80" x="351.42856" y="152.36218" id="rect1" style="fill:#008000"></rect> 

从这个svg。 我可以使用jquery和jquery svg。 我尝试：

    $(document).ready(function() {
    console.log($("#plan #rect1")[0]);
})

在控制台中，我使用此字符串，但是我必须在这样的变量中获取字符串：

var str = $("#plan #rect1")[0];

变量str是[object SVGRectElement] [在此处输入链接描述] 1

Answer 1

为了合并先前的答案（起初我不太清楚），获取SVG字符串的方法如下：

var str = $('<div>').append($('#plan #rect1').clone()).html(); 

Answer 2

$('#rect1')[0]

这应该有所帮助。 如果要访问标记而不是jQuery元素，请使用[]获取封装的元素。

编辑 ：

这应该为您解决问题 。

解释的解决方案是将您的选择包装到另一个标记中，并在其上调用.html（）以显示其内容。

在将.clone（）调用追加到temp div之前，请不要忘记它，否则您的html会遇到一些麻烦:)