Как получить строку динамически модифицированного элемента SVG документа HTML?

Question

Я написал javascript, который динамически редактирует элемент SVG.Я хочу получить новую строку отредактированного элемента SVG, но в настоящее время мой код не работает.Я нашел здесь следующий код, чтобы получить строковую форму документа HTML.

var txt = document.documentElement.innerHTML;

Я просто хочу innerHTML элемента SVG.Я попробовал следующий код, но получил сообщение об ошибке "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>