将SVGSVGElement转换为String

时间:2012-10-12 18:28:24

标签: javascript xml svg

我一直在寻找答案,但我找不到将SVGSVGElement转换为字符串的方法。我正在使用Chrome(22)。如果以前已经回答了这个问题,我很抱歉,但我无法找到它(此处或Google上)。

我有一个嵌入在HTML页面中的SVG(XML)图像,并使用Javascript(添加/删除形状等)操纵SVG。我的目标是将修改后的SVG XML映像保存在内存中并将其保存到文件中(通过发布到php表单)。 post和php表单正在运行,但我目前遇到的问题是我无法获得修改后的SVG图像的字符串表示。

我在下面发布了一个简化页面,我只想从加载的SVG中获取原始XML并将其粘贴到textarea中。如果您测试下面的html,您会看到textarea只包含字符串:“ [object SVGSVGElement] ”。

我可以使用Javascript访问SVG中的每个元素并操纵元素和属性,但我似乎无法将整个事物变成字符串。我已经尝试过JQuery和JQuery SVG但是无法让它运行起来。 console.log()能够显示svg / xml,但它不是字符串,所以我似乎无法存储/发送它。非常感谢任何帮助!

我甚至会想办法将任何SVG * Element对象转换为字符串,因为我可以使用.childNodes [x]属性遍历所有这些,但这些仍然是对象,我似乎无法只需获取原始XML。

的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:

<?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>

3 个答案:

答案 0 :(得分:16)

您可以使用XMLSerializer将元素转换为字符串。

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

答案 1 :(得分:2)

SVG是DOM元素,因此您只需使用SVG Elements的outerHTML属性即可获取序列化的HTML。

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

答案 2 :(得分:0)

使用jQuery更容易,如下所示:

svgObject  // your SVGSVGElement

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