將SVGSVGElement轉換為String

Question

我到處搜索了一個答案，但我找不到將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>

Answer 1

您可以使用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

使用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