outerHTML elementu SVG

Question

Dlaczego nie możemy dostać outerHTML elementu svg z element.outerHTML nieruchomości?

Czy ta metoda jest najlepsza? http://jsfiddle.net/33g8g/ do pobierania kodu źródłowego svg?

Answer 1

Nie jest dostępny przez zewnętrzny HTML, ponieważ SVG nie jest HTML - jest to oddzielna XML specification.

Dlatego na przykład twój węzeł svg w tym przykładzie ma zdefiniowany własny obszar nazw (xmlns="http://www.w3.org/2000/svg).

Twój przykład może być najbardziej przydatny w przypadku jednorazowej kwerendy, ale w rzeczywistości można kopać przy użyciu natywnych atrybutów. To wymaga trochę więcej pracy.

Użyjmy połączony węzeł próbkowania:

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

Jeśli chcesz wyodrębnić nazw i wersji, należy użyć właściwości 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" 

Jeśli chcesz wyodrębnić rzeczywistą zawartość, wykonaj iterację nad dziećmi. Podobnie do powyższego, kolekcja attributes węzła nietekstowego będzie zawierała wartości x/y (itp.).

Bez jQuery, ponownie używając przykładu:

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

Oto zaktualizowaną Fiddle, trochę bardziej elegancko demonstrując możliwości: http://jsfiddle.net/33g8g/8/

Answer 2

SVGElements nie mają właściwość outerHTML.

Można zdefiniować tak w czystym 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 
}); 

Albo jedna linia rozwiązanie jQuery byłoby

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

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

Answer 3

2013 aktualizacja:innerHTML i outerHTML będą obsługiwane przez svg eleme również za DOM Parsing specification.

Łatka za to została wylądowana w Blink/Chrome i wkrótce będzie dostępna, patrz http://code.google.com/p/chromium/issues/detail?id=311080.

Answer 4

jQuery, można łatwo utworzyć tymczasowy owijkę wokół dowolnego elementu HTML, który nie obsługuje outerHTML:

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

Answer 5

jest to prostsze rozwiązanie i działa świetnie w FF, Chrome, IE. Honorowany jest numer Philipp Wrann.

outerHtml is not working in IE

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