我到处寻找答案，但找不到将 SVGSVGElement 转换为字符串的方法。我正在使用 Chrome(22)。如果之前有人回答过这个问题，但我无法找到它(在这里或在 Google 上)，我深表歉意。
我在 HTML 页面中嵌入了一个 SVG (XML) 图像，我正在使用 Javascript 操作 SVG(添加/删除形状等)。我的目标是在内存中获取修改后的 SVG XML 图像并将其保存到文件中(通过发布到 php 表单)。 post 和 php 表单可以正常工作，但我目前遇到的问题是我无法获得修改后的 SVG 图像的字符串表示形式。
我在下面发布了一个简化的页面，我只是试图从加载的 SVG 中获取原始 XML 并将其粘贴到文本区域中。如果您测试下面的 html，您会看到文本区域只包含字符串:“[object SVGSVGElement]”。
我可以使用 Javascript 访问 SVG 中的每个元素并操作元素和属性，但我似乎无法将整个元素放入一个字符串中。我已经尝试过 JQuery 和 JQuery SVG，但无法使其正常工作。 console.log() 能够显示 svg/xml，但它不是字符串，所以我似乎无法存储/发送它。非常感谢任何帮助!
我什至想找到一种方法将任何 SVG*Element 对象转换为字符串，因为我可以使用 .childNodes[x] 属性遍历所有这些对象，但这些仍然是对象，我似乎无法只需获取原始 XML。
测试.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>
最佳答案
您可以使用 XMLSerializer将元素转换为字符串。
var s = new XMLSerializer();
var str = s.serializeToString(documentElement);
关于javascript - 将 SVGSVGElement 转换为字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12865025/