Convertir SVGSVGElemento a la Cadena

He buscado una respuesta en todas partes, pero no puedo encontrar la manera de convertir un SVGSVGElement en una cadena. Estoy usando Chrome (22). Me disculpo si esto se ha respondido antes, pero no pude encontrarlo (aquí o en Google).Convertir SVGSVGElemento a la Cadena

Tengo una imagen SVG (XML) incrustada en una página HTML y estoy manipulando el SVG con Javascript (agregando/quitando formas, etc.). Mi objetivo es tomar la imagen XML SVG modificada en la memoria y guardarla en un archivo (publicando en un formulario php). La publicación y el formulario php están funcionando, pero el problema que estoy teniendo actualmente es que no puedo obtener la representación de cadena de la imagen SVG modificada.

He publicado una página simplificada a continuación en la que estoy tratando de obtener el XML sin procesar del SVG cargado y pegarlo en el área de texto. Si prueba el html a continuación, verá que el área de texto solo contiene la cadena: "[object SVGSVGElement]".

Puedo acceder a cada elemento en el SVG con Javascript y manipular los elementos y atributos, pero parece que no puedo simplemente poner todo en una cadena. Intenté JQuery y JQuery SVG, pero no pude hacerlo funcionar. console.log() puede mostrar svg/xml, pero no es una cadena, por lo que parece que no puedo almacenarlo ni enviarlo. ¡Cualquier ayuda es muy apreciada!

Incluso me conformaría con una forma de convertir cualquier objeto SVG * Element a una cadena, ya que puedo usar la propiedad .childNodes [x] para recorrerlos a todos, pero estos siguen siendo objetos y no puedo parecer solo obtener el XML sin formato.

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>

Fuente

2012-10-12 ssvyper

Usted puede utilizar XMLSerializer para convertir los elementos en una cadena.

Fuente

2012-10-12 19:12:57

pensé que sólo funcionaba en Mozilla, pero parece que definitivamente las obras de IE9 y Chrome también. ¡Muy bien entonces, gracias! – ssvyper

Es más fácil de hacer con jQuery de la siguiente manera:

svgObject // your SVGSVGElement 

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

Fuente

2014-03-19 10:40:03

Internamente JQuery simplemente llama a innerHTML(), que arroja un error cuando se le llama a los objetos SVG en IE. –

Convertir SVGSVGElemento a la Cadena

Respuesta

Cuestiones relacionadas