将SVGSVGElement转换为String

Question

I've searched for an answer all over but I can't find a way to convert a SVGSVGElement to a string. 我到处搜索了一个答案，但我找不到将SVGSVGElement转换为字符串的方法。 I'm using Chrome(22). 我正在使用Chrome（22）。 I apologize if this has been answered before but I wasn't able to find it (here or on Google). 如果之前已经回答过但我无法找到它（此处或Google上），我道歉。

I have an SVG (XML) image embedded in an HTML page and am manipulating the SVG with Javascript (adding/removing shapes, etc). 我有一个嵌入在HTML页面中的SVG（XML）图像，并使用Javascript（添加/删除形状等）操纵SVG。 My goal is to take the modified SVG XML image in memory and save it to a file (by posting to a php form). 我的目标是将修改后的SVG XML映像保存在内存中并将其保存到文件中（通过发布到php表单）。 The post and php form are working, but the issue I'm currently having is that I can't get the string representation of the modified SVG image. post和php表单正在运行，但我目前遇到的问题是我无法获得修改后的SVG图像的字符串表示。

I've posted a simplified page below where I'm just trying to get the raw XML from the loaded SVG and paste it into the textarea. 我在下面发布了一个简化的页面，我只是想从加载的SVG中获取原始XML并将其粘贴到textarea中。 If you test the html below you'll see that the textarea just contains the string: " [object SVGSVGElement] ". 如果你测试下面的html，你会发现textarea只包含字符串：“ [object SVGSVGElement] ”。

I can access each element in the SVG with Javascript and manipulate the elements and attributes, but I can't seem to just get the whole thing into a string. 我可以使用Javascript访问SVG中的每个元素并操纵元素和属性，但我似乎无法将整个事物变成字符串。 I've tried JQuery and JQuery SVG but wasn't able to get it working. 我已经尝试过JQuery和JQuery SVG但是无法让它运行起来。 console.log() is able to show the svg/xml, but it's not a string, so I can't seem to store/send it. console.log（）能够显示svg / xml，但它不是字符串，所以我似乎无法存储/发送它。 Any assistance is greatly appreciated! 非常感谢任何帮助！

I would even settle for a way to convert any SVG*Element object to a string as I can use the .childNodes[x] property to traverse through all of them, but these are still objects and I can't seem to just get the raw XML. 我甚至会想办法将任何SVG * Element对象转换为字符串，因为我可以使用.childNodes [x]属性遍历所有这些对象，但这些仍然是对象，我似乎无法得到原始XML。

Test.html: 的test.html：

<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
<script>
function startup() {
    svgOutput = document.getElementById("svgCanvas").getSVGDocument().documentElement;    
    console.log(svgOutput);
    document.getElementById("output").value = svgOutput;
}
</script>
</head>
<body style="margin: 0px;" onload="startup()">
<textarea id="output"></textarea><br/>
<embed src="svg1.svg"
    id="svgCanvas"
    width="75%" height="75%"
    type="image/svg+xml"
    codebase="http://www.adobe.com/svg/viewer/install"
></embed>
</body>
</html>

svg1.svg: svg1.svg：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<image id="svgBackground" x="0px" y="0px" width="100%" height="100%" preserveAspectRatio="none" xlink:href="bg1.jpg"/>
<g id="1">
    <text id="shape" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">circle</text>
    <text id="elementName" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">Element 1</text>
    <circle id="circle" cx="12%" cy="34%" r="15" opacity="1" fill="grey" stroke="darkgrey" stroke-width="5px"/>
</g>
<g id="2">
    <text id="shape" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">circle</text>
    <text id="elementName" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">Element 2</text>
    <circle id="circle" cx="21%" cy="63%" r="15" opacity="1" fill="grey" stroke="darkgrey" stroke-width="5px"/>
</g>
</svg>

Answer 1

You can use XMLSerializer to convert elements to a string. 您可以使用XMLSerializer将元素转换为字符串。

var s = new XMLSerializer();
var str = s.serializeToString(documentElement);

Answer 2

SVG是一个DOM元素，因此您可以简单地使用SVG Elements的outerHTML属性来获取序列化的HTML。

    var stringData = document.getElementById('my-svg').outerHTML;

Answer 3

It's easier to do with jQuery as follows : 使用jQuery更容易，如下所示：

svgObject  // your SVGSVGElement

svgStringData = $(svgObject).html()  // will convert data of SVGSVGElement Object to string

将SVGSVGElement转换为String

问题描述

3 个解决方案

解决方案1
17 已采纳 2012-10-12 19:12:57

解决方案2
3 2019-02-02 14:55:15

解决方案3
0 2014-03-19 10:40:03

将SVGSVGElement转换为String

问题描述

3 个解决方案

解决方案1 17 已采纳 2012-10-12 19:12:57

解决方案2 3 2019-02-02 14:55:15

解决方案3 0 2014-03-19 10:40:03

解决方案1
17 已采纳 2012-10-12 19:12:57

解决方案2
3 2019-02-02 14:55:15

解决方案3
0 2014-03-19 10:40:03