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

我有一个简单的SVG THML页是这样的：如何使用jQuery或JavaScript从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是[对象SVGRectElement] [进入链接这里描述] 1

来源

2012-03-26 VasyambaTula

$('#rect1')[0]

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

编辑：

This should do the trick for you。

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

追加到您的临时DIV之前，不要忘了.clone（）调用，否则你将不得不在你的HTML :)

来源

2012-03-26 12:25:53 Mordhak

我使用var str = $（“＃plan>＃rect1”）[0];警报（STR）;但str未定义 – VasyambaTula 2012-03-26 13:03:06

$（“＃plan>＃rect1”）将搜索计划中具有id“rect1”的下一个孩子，但您的孩子是“g”标记。这就是$（“＃plan>＃rect1”）不返回任何内容的原因。 “>”表示直接的孩子。改为使用$（“＃plan＃rect1”）。 – Mordhak 2012-03-26 13:08:13

我使用：var str = $（“＃plan＃rect1”）。html（）; alert（str）;它使错误 - 未捕获TypeError：不能调用未定义的方法'替换'。我使用：var str = document.getElementById（'rect1'）; var st = str.innerHTML; 警报（st）;但var st未定义 – VasyambaTula 2012-03-27 09:46:19

要结合前面的答案（这是不明确的，我在一些麻烦首先）获取SVG字符串的方式如下：

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

来源

2012-10-30 16:53:11

非常好，谢谢 – nodrog 2012-11-23 16:58:58

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

回答

相关问题