outerHTML de un elemento SVG

Question

¿Por qué no podemos obtener outerHTML de un elemento svg con la propiedad element.outerHTML?

¿De esta manera es la mejor http://jsfiddle.net/33g8g/ para obtener el código fuente svg?

Answer 1

No se puede acceder a través de outerHTML porque SVG no es HTML, es un XML specification por separado.

Por eso, por ejemplo, su nodo svg en ese ejemplo tiene su propio espacio de nombres definido (xmlns="http://www.w3.org/2000/svg).

Su ejemplo puede ser el más conveniente para una consulta única, pero en realidad es posible excavar usando atributos nativos. Solo lleva un poco más de trabajo.

Vamos a utilizar el nodo de la muestra enlazada:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <text x="0" y="15" fill="black">An SVG element.</text> 
</svg> 

Si desea extraer el espacio de nombres y la versión, utilice la propiedad attributes.

var svgElement = $('svg')[0]; // using your example 
console.log(svgElement.attributes.xmlns); // outputs "http://www.w3.org/2000/svg" 
console.log(svgElement.attributes.version); // outputs "1.1" 

Si desea extraer el contenido real, repita los pasos sobre los elementos secundarios. Similar a lo anterior, la colección attributes de un nodo sin texto contendrá los valores x/y (etc.).

Sin utilizar jQuery, utilizando el ejemplo de nuevo:

for (var i = 0; i < svgElement.childNodes.length; i++) { 
    var child = svgElement.childNodes[i]; 
    if (child.nodeType == 1) { 
     console.log(child.attributes[0].name); // "x" 
     console.log(child.attributes[0].value); // "0" 
     console.log(child.attributes[1].name); // "y" 
     console.log(child.attributes[1].value); // "15" 
    } 
} 

He aquí un violín actualizada, un poco más elegante que demuestra las posibilidades: http://jsfiddle.net/33g8g/8/

Answer 2

SVGElements no tienen la propiedad outerHTML.

Se puede definir como esto en puro Javascript

Object.defineProperty(SVGElement.prototype, 'outerHTML', { 
    get: function() { 
     var $node, $temp; 
     $temp = document.createElement('div'); 
     $node = this.cloneNode(true); 
     $temp.appendChild($node); 
     return $temp.innerHTML; 
    }, 
    enumerable: false, 
    configurable: true 
}); 

o una solución jQuery una línea sería

$('<div>').append($(svgElement).clone()).html(); 

Referencia: https://gist.github.com/jarek-foksa/2648095

Answer 3

2013 actualización: El innerHTML y outerHTML van a ser compatibles para svg eleme nts también, por el DOM Parsing specification.

Un parche para esto ha sido descargado en Blink/Chrome y estará disponible pronto, vea http://code.google.com/p/chromium/issues/detail?id=311080.

Answer 4

Usando jQuery, puede crear fácilmente un contenedor de HTML temporal alrededor de cualquier elemento que no admite outerHTML:

function wrappedHtml(elt){ 
    var wrapped = elt.wrap("<wrap></wrap>").parent().html(); 
    elt.unwrap(); 
    return wrapped; 
} 

Answer 5

Ésta es una solución más fácil y funciona muy bien en FF, Chrome, IE. El honor va al Philipp Wrann.

outerHtml is not working in IE

new XMLSerializer().serializeToString(document.querySelector('#b'))