html - 将 DOM 元素转换为字符串

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>

现在我应该怎么做才能以字符串的形式从 to 获取所有代码，我可以打印它。

Answer 1

To get the equivalent of innerHTML in SVG you must first serialize the SVG, it is done like this:

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

You can see an example here:

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>