blocks|key|470206|text|不能通过outerHTML访问它，因为SVG不是HTML语言--它是一个单独的XML+specification。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|470207|例如，这就是为什么示例中svg节点定义了自己的名称空间(xmlns="http://www.w3.org/2000/svg)。|style|CODE|470208|对于一次性查询，您的示例可能是最方便的，但实际上也可以使用原生属性进行深入挖掘。这只需要多做一点工作。|470209|让我们使用链接的示例节点：|470210|+<svg+xmlns="http://www.w3.org/2000/svg"+version="1.1">
++++<text+x="0"+y="15"+fill="black">An+SVG+element.</text>
</svg>+|code-block|syntax|javascript|470211|如果要提取命名空间和版本，请使用attributes属性。|470212|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"|470213|如果您想提取实际内容，请遍历子对象。与上面类似，非文本节点的attributes集合将包含x/y值(等)。|470214|在不使用jQuery的情况下，再次使用您的示例：|470215|for+(var+i+=+0;+i+<+svgElement.childNodes.length;+i%2B%2B)+{
++++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"
++++}
}|470216|这是一个更新的提琴，更优雅地展示了各种可能性：http://jsfiddle.net/33g8g/8/|470217|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Scalable_Vector_Graphics|1|http://jsfiddle.net/33g8g/8/^0|13|H|0|0|S|X|0|0|0|0|G|A|0|0|U|A|0|0|0|N|S|1|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|D|3|E|5|6|7|1G|8|@$A|1H|B|1I|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1J|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1K|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1L|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|6|7|1M|8|@$A|1N|B|1O|F|G]]|9|@]|C|$]]|$1|S|3|T|5|N|7|1P|8|@]|9|@]|C|$O|P]]|$1|U|3|V|5|6|7|1Q|8|@$A|1R|B|1S|F|G]]|9|@]|C|$]]|$1|W|3|X|5|6|7|1T|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|N|7|1U|8|@]|9|@]|C|$O|P]]|$1|10|3|11|5|6|7|1V|8|@]|9|@$A|1W|B|1X|1|1Y]]|C|$]]|$1|12|3|-4|5|6|7|1Z|8|@]|9|@]|C|$]]]|13|$14|$5|15|16|17|C|$18|19]]|1A|$5|15|16|17|C|$18|1B]]]]

It's not accessible via outerHTML because SVG is not HTML -- it's a separate <a href="http://en.wikipedia.org/wiki/Scalable_Vector_Graphics" rel="noreferrer">XML specification</a>.

That's why, for example, your svg node in that example has its own namespace defined (<code>xmlns="http://www.w3.org/2000/svg</code>).

Your example may be the most expedient for a one-off query, but it's actually possible to dig in using native attributes. It just takes a bit more work.

Let's use the linked sample node:

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

If you want to extract the namespace and version, use the <code>attributes</code> property.

<pre><code>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"
</code></pre>

If you want to extract the actual contents, iterate over the children. Similar to the above, a non-text node's <code>attributes</code> collection will contain the x/y values (etc).

Without using jQuery, using your example again:

<pre><code>for (var i = 0; i &lt; 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"
 }
}
</code></pre>

Here's an updated Fiddle, a bit more elegantly demonstrating the possibilities:
<a href="http://jsfiddle.net/33g8g/8/" rel="noreferrer">http://jsfiddle.net/33g8g/8/</a>

blocks|key|253319|text|SVGElements没有outerHTML属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|253320|您可以在纯Javascript中这样定义|253321|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
});|code-block|syntax|javascript|253322|或者一行jQuery解决方案将是|253323|$('<div>').append($(svgElement).clone()).html();|253324|参考：https://gist.github.com/jarek-foksa/2648095|offset|length|253325|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/jarek-foksa/2648095^0|0|0|0|0|0|3|17|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

SVGElements don't have outerHTML property.

You can define like this in pure Javascript

<pre><code>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
});
</code></pre>

Or a one line jQuery solution would be

<pre><code>$('&lt;div&gt;').append($(svgElement).clone()).html();
</code></pre>

Reference:
<a href="https://gist.github.com/jarek-foksa/2648095">https://gist.github.com/jarek-foksa/2648095</a>

blocks|key|253361|text|使用jQuery，您可以轻松地为任何不支持outerHTML的元素创建一个临时的HTML包装器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|253362|function+wrappedHtml(elt){
++++var+wrapped+=+elt.wrap("<wrap></wrap>").parent().html();
++++elt.unwrap();
++++return+wrapped;
}|code-block|syntax|javascript|253363|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Using jQuery, you can easily create a temporary HTML wrapper around any element that doesn't support outerHTML :

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

blocks|key|253372|text|这是一个更简单的解决方案，它在FF，Chrome，IE中工作得很好。荣誉属于Philipp+Wrann。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|253373|outerHtml+is+not+working+in+IE|253374|new+XMLSerializer().serializeToString(document.querySelector('#b'))|code-block|syntax|javascript|253375|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/2524323/philipp-wrann|1|https://stackoverflow.com/questions/29888050/outerhtml-is-not-working-in-ie#answer-44943988^0|12|D|0|0|0|U|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

This is an easier solution and it works great in FF, Chrome, IE. Honor goes to <a href="https://stackoverflow.com/users/2524323/philipp-wrann">Philipp Wrann</a>.

<a href="https://stackoverflow.com/questions/29888050/outerhtml-is-not-working-in-ie#answer-44943988">outerHtml is not working in IE</a>

<pre><code>new XMLSerializer().serializeToString(document.querySelector('#b'))
</code></pre>

Why can not we get outerHTML of an svg element with <code>element.outerHTML</code> property?

Is this way is the best <a href="http://jsfiddle.net/33g8g/" rel="noreferrer">http://jsfiddle.net/33g8g/</a> for getting svg source code?

outerHTML of an SVG element

jQuery

为什么不能获取带有element.outerHTML属性的svg元素的outerHTML？这种方式是获取svg源代码的最佳吗？

问SVG元素的outerHTML
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG元素的outerHTMLEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG元素的outerHTML
EN