Convert SVGSVGElement to String
Question
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).
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.
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] ".
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!
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:
<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 answers
solution1
17 ACCPTED 2012-10-12 19:12:57
You can use XMLSerializer to convert elements to a string.
var s = new XMLSerializer();
var str = s.serializeToString(documentElement);
solution2
3 2019-02-02 14:55:15
SVG是一个DOM元素，因此您可以简单地使用SVG Elements的outerHTML属性来获取序列化的HTML。
var stringData = document.getElementById('my-svg').outerHTML;
solution3
0 2014-03-19 10:40:03
It's easier to do with jQuery as follows :
svgObject // your SVGSVGElement
svgStringData = $(svgObject).html() // will convert data of SVGSVGElement Object to string
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.