javascript - tag - externalHTML de un elemento SVG

svg with javascript

Question

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

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

Answer 1

Con jQuery, puede crear fácilmente un contenedor HTML temporal alrededor de cualquier elemento que no admita externalHTML:

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

Answer 2

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

outerHtml no está funcionando en IE

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

Answer 3

No se puede acceder a través de outerHTML porque SVG no es HTML, es una especificación XML separada.

Por eso, por ejemplo, su nodo svg en ese ejemplo tiene su propio espacio de nombre 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 utilizar atributos nativos. Solo se necesita un poco más de trabajo.

Vamos a utilizar el nodo de ejemplo vinculado:

 <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, use la propiedad de 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 los contenidos reales, iterar sobre los niños. De manera similar a lo anterior, la colección de attributes de un nodo que no es de texto contendrá los valores de x / y (etc.).

Sin usar jQuery, usando tu ejemplo otra vez:

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"
    }
}

Aquí hay un Fiddle actualizado, un poco más elegante que demuestra las posibilidades: http://jsfiddle.net/33g8g/8/

Answer 4

SVGElements no tiene propiedad outerHTML.

Puedes definir así en Javascript puro

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 de una línea sería

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

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

Answer 5

Actualización de 2013: el innerHTML y outerHTML también serán compatibles con elementos svg, según la especificación de análisis DOM .

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