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

How get SVG code from html page, using jQuery or JavaScript?

本文关键字：获取 SVG 代码 html 何使用 jQuery JavaScript      更新时间：2023-09-26

我有一个简单的HTML页面，上面有这样的svg：

<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

要结合前面的答案（起初我不清楚），获取SVG字符串的方法如下：

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

$('#rect1')[0]

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

编辑：

这应该对你有用。

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

在将.clone（）调用附加到tempdiv之前，不要忘记它，否则您的html：）

会遇到一些问题
相关文章：