Question

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

var txt = document.documentElement.innerHTML;

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

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类型设施

如果XML具有类似innerHTML的功能，那将是一件好事。在ECMAScript字符串中编写标记可能有点痛苦，但它也可以简化很多事情，并且对于有用的场景类型可能更好，这可能意味着类似E4X的功能。

调用此工具innerHTML会使得标记应该被解析为在XHTML命名空间中，因此innerMarkup或insertCode可能是更好的名称，或者，对于与textContent对称，可能是markupContent。

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

XMLSerializer将DOM树序列化为字符串

或参见https://stackoverflow.com/a/4916895/20394获取等效的IE。

Answer 2

一些实际代码（在Google-Chrome和IE 11中测试）：

<object id="sv" data="Switzerland_regions.svg" type="image/svg+xml">
    <!-- <img src="yourfallback.jpg" />-->
</object>


<script type="text/javascript">
        var S = document.getElementById("svgnode1")

        var markup = (new XMLSerializer()).serializeToString(S.contentDocument.rootElement);
        console.log(markup);


        // var SD = S.getSVGDocument();

        // var circle1 = SD.getElementById("GR");
        // console.log(circle1);
        // circle1.style.fill = "grey";

         //var rectangle = SD.querySelector("#layer4");
        //var parent = rectangle.parentNode;
        //parent.removeChild(rectangle);
</script>

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

2 个答案: