将SVGSVGElement转换为String [英] Convert SVGSVGElement to String
问题描述
我一直在寻找答案，但是找不到将SVGSVGElement转换为字符串的方法.我正在使用Chrome(22).抱歉，以前没有回答过，但是找不到(在这里或在Google上).
I've searched for an answer all over but I can't find a way to convert a SVGSVGElement to a string. I'm using Chrome(22). I apologize if this has been answered before but I wasn't able to find it (here or on Google).
我在HTML页面中嵌入了SVG(XML)图像，并且正在使用Javascript处理SVG(添加/删除形状等).我的目标是将修改后的SVG XML图像保存到内存中，并将其保存到文件中(通过发布到php表单).帖子和php形式都可以使用，但是我目前遇到的问题是我无法获得修改后的SVG图像的字符串表示形式.
I have an SVG (XML) image embedded in an HTML page and am manipulating the SVG with Javascript (adding/removing shapes, etc). My goal is to take the modified SVG XML image in memory and save it to a file (by posting to a php form). 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.
我在下面发布了一个简化页面，我试图从加载的SVG中获取原始XML并将其粘贴到textarea中.如果您测试下面的html，您会看到文本区域仅包含字符串:" [object SVGSVGElement] ".
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. If you test the html below you'll see that the textarea just contains the string: "[object SVGSVGElement]".
我可以使用Javascript访问SVG中的每个元素，并操纵元素和属性，但是我似乎无法将整个事情变成一个字符串.我已经尝试过JQuery和JQuery SVG，但无法使其正常工作. console.log()能够显示svg/xml，但是它不是字符串，因此我似乎无法存储/发送它.非常感谢您的协助！
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. I've tried JQuery and JQuery SVG but wasn't able to get it working. console.log() is able to show the svg/xml, but it's not a string, so I can't seem to store/send it. Any assistance is greatly appreciated!
我什至会想办法将任何SVG * Element对象转换为字符串，因为我可以使用.childNodes [x]属性遍历所有这些对象，但是这些仍然是对象，我似乎无法只需获取原始XML.
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.
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:
<?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 将元素转换为字符串.
You can use XMLSerializer to convert elements to a string.
var s = new XMLSerializer();
var str = s.serializeToString(documentElement);
这篇关于将SVGSVGElement转换为String的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
