javascript - 如何获取 HTML 文档动态修改的 SVG 元素的字符串？

Question

我编写了动态编辑 svg 元素的 javascript。我想获取编辑后的 ​​svg 元素的新字符串，但目前我的代码失败了。 我在这里找到了以下代码来获取 HTML 文档的字符串形式。

var txt = document.documentElement.innerHTML;

我只想要 SVG 元素的 innerHTML。我尝试了以下代码，但收到一条错误消息，提示“未定义”。

var svgnode=document.getElementById("svgnode1");
alert(svgnode.innerHTML);

我该怎么做。该错误发生在 Google Chrome 上，但我想要一个适用于任何浏览器的解决方案。

Answer 1

innerHTML 是为 HTML 文档定义的，而不是为其他类型的 XML DOM 定义的。

innerHTML 计划了一些机制，例如 SVG 的设施。 http://www.w3.org/Graphics/SVG/WG/wiki/SVG_2_DOM#innerHTML_type_facilities :

innerHTML type facilities

It would be good if XML had an innerHTML-like feature. Writing markup in an ECMAScript string can be a bit of a pain, but it can also simplify things a lot, and to get better that that for the types of scenario in which it's useful probably means E4X-like capabilities.

Calling this facility innerHTML would make it seem like the markup should be parsed as being in the XHTML namespace, so maybe innerMarkup or insertCode would be a better name, or, for symmetry with textContent, maybe markupContent.

如果您需要一种将 SVG 或任何其他 XML DOM 转换为 XML 字符串的方法，请参阅 https://developer.mozilla.org/en/Parsing_and_serializing_XML

• XMLSerializer to serialize DOM trees to strings

或查看 https://stackoverflow.com/a/4916895/20394对于 IE 等价物。