SVG要素のouterHTML

Question

element.outerHTMLプロパティを持つsvg要素のouterHTMLを取得できないのはなぜですか？

この方法は、svgソースコードを取得するのに最高のhttp://jsfiddle.net/33g8g/ですか？

Answer 1

SVGはHTMLではないため、外部HTML経由でアクセスすることはできません。別途XML specificationです。

これは、たとえば、その例のsvgノードに独自の名前空間（xmlns="http://www.w3.org/2000/svg）が定義されている理由です。

あなたの例は、1回限りのクエリにとって最も適切な場合がありますが、ネイティブ属性を使用して実際に掘り下げることは可能です。それだけでもう少し作業が必要です。名前空間とバージョンを抽出したい場合はattributesプロパティを使用し、

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

：

はのは、リンクされたサンプルノードを使用してみましょう。

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" 

実際の内容を抽出する場合は、子を繰り返し処理します。上記と同様に、非テキストノードのattributesコレクションには、x/y値（など）が含まれます。もう一度あなたの例を使用して、jQueryのを使用せずに

：

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

はここで更新フィドル、ビットはよりエレガントな可能性を実証しています： http://jsfiddle.net/33g8g/8/

Answer 2

SVGElementsは、outerHTMLプロパティを持っていません。

あなたは純粋な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 
}); 

に、このように定義することができますまたは1つのラインjQueryのソリューションは次のようになり

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

参考： https://gist.github.com/jarek-foksa/2648095

Answer 3

2013更新：innerHTMLとouterHTMLはsvg elemeでサポートされる予定ですntsも、DOM Parsing specificationごとに。

Blink/Chromeにパッチが適用され、すぐに利用できるようになります。http://code.google.com/p/chromium/issues/detail?id=311080を参照してください。 jQueryのを使用して

Answer 4

、あなたは簡単にouterHTMLをサポートしていない任意の要素の周りに一時的なHTMLラッパーを作成することができます。

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

Answer 5

は、これは容易なソリューションであり、それはFF、クローム、IEで素晴らしい作品。名誉はPhilipp Wrannに行きます。

outerHtml is not working in IE

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