Question

我正在研究svg。我使用我的javascript代码在svg中制作了一些形状。现在我要做的就是获取svg的代码，这是我绘制的东西。我希望以字符串的形式获取该代码，以便重用或者如果可以将该代码放在.svg文件中，它输出与我自己使用我的javascript代码所做的相同。就像我的代码一样

 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="500" height="500" id="one">
<g id="container">
    <rect id ="rect" x="0" y="0" width="0" height="0" fill="pink"
          stroke="blue" stroke-width="2" />

</g>

现在该怎么办才能以字符串形式获取所有代码，我可以打印出来。

Answer 1

要在SVG中获得等效的innerHTML，您必须首先序列化SVG，它是这样完成的：

var svg = document.querySelector("svg");
var serializer = new XMLSerializer();
var string = serializer.serializeToString(svg);

你可以在这里看到一个例子：

http://jsfiddle.net/rrPwS/

Answer 2

//in your javascript:

function getMyString()  {    
  var theStringIWant = document.getElementById("container").innerHTML;
  d.getElementbyId('theBox').value = theStringIWant
}

//and in your HTML:

<form>
  <textarea id="theBox" rows="2" cols="60">Here's the string</textarea>
  <input type="button" value="get the string" onclick="getMyString()" /> 
</form>

转换String中的DOM元素

2 个答案: