Perché non è possibile ottenere outerHTML di un elemento svg con la proprietà element.outerHTML?outerHTML di un elemento SVG
È in questo modo è il migliore http://jsfiddle.net/33g8g/ per ottenere il codice sorgente svg?
Non è accessibile tramite outerHTML perché SVG non è HTML, è un separato XML specification.
Ecco perché, ad esempio, il nodo svg in quell'esempio ha il proprio spazio dei nomi definito (xmlns="http://www.w3.org/2000/svg).
L'esempio può essere il più appropriato per una query una tantum, ma in realtà è possibile scavare utilizzando gli attributi nativi. Ci vuole solo un po 'di lavoro in più.
Usiamo il nodo del campione collegato:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="black">An SVG element.</text>
</svg>
Se si desidera estrarre lo spazio dei nomi e la versione, utilizzare la proprietà 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"
Se si desidera estrarre il contenuto effettivo, iterare i bambini. Analogamente a quanto sopra, la raccolta attributes del nodo non di testo conterrà i valori x/y (ecc.).
Senza usare jQuery, utilizzando ancora una volta il tuo esempio:
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"
}
}
Ecco un violino aggiornato, un po 'più elegante che dimostra le possibilità: http://jsfiddle.net/33g8g/8/
SVGElements non hanno proprietà outerHTML.
È possibile definire come questo in 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 soluzione jQuery una linea sarebbe
$('<div>').append($(svgElement).clone()).html();
Riferimento: https://gist.github.com/jarek-foksa/2648095
2013 aggiornamento: Il innerHTML e outerHTML saranno supportati per svg eleme anche per lo DOM Parsing specification.
Una patch per questo è stata sbarcata in Blink/Chrome e sarà presto disponibile, vedere http://code.google.com/p/chromium/issues/detail?id=311080.
utilizzando jQuery, è possibile creare facilmente un wrapper HTML temporanea intorno a qualsiasi elemento che non supporta outerHTML:
function wrappedHtml(elt){
var wrapped = elt.wrap("<wrap></wrap>").parent().html();
elt.unwrap();
return wrapped;
}
Si tratta di una soluzione più facile e funziona benissimo in FF, Chrome, IE. L'onore va a Philipp Wrann.
outerHtml is not working in IE
new XMLSerializer().serializeToString(document.querySelector('#b'))
Grazie per la condivisione che - stava avendo un diavolo di un tempo ottenere outerHTML di lavorare in Safari! – aendrew
Vorrei aggiungere 'if (! ('OuterHTML' in SVGElement.prototype)) {/ ** * /}' attorno al polyfill –