Преобразование SVGSVGElement в String

Я искал ответ, но не могу найти способ преобразования SVGSVGElement в строку. Я использую Chrome (22). Я прошу прощения, если об этом ответили раньше, но я не смог его найти (здесь или в Google).

У меня есть изображение SVG (XML), встроенное в HTML-страницу, и я манипулирую SVG с помощью Javascript (добавление/удаление фигур и т.д.). Моя цель - перенести модифицированный образ SVG XML в память и сохранить его в файл (путем отправки в php-форму). Форма post и php работают, но проблема, с которой я сейчас сталкиваюсь, заключается в том, что я не могу получить строковое представление измененного изображения SVG.

Я опубликовал упрощенную страницу ниже, где я просто пытаюсь получить необработанный XML из загруженного SVG и вставить его в текстовое поле. Если вы проверите html ниже, вы увидите, что текстовая область содержит только строку: " [объект SVGSVGElement]".

Я могу получить доступ к каждому элементу SVG с помощью Javascript и манипулировать элементами и атрибутами, но я не могу просто привести все это в строку. Я пробовал JQuery и JQuery SVG, но не смог заставить его работать. console.log() может показать svg/xml, но это не строка, поэтому я не могу ее хранить и отправлять. Любая помощь очень ценится!

Я бы даже согласился на способ преобразования любого объекта SVG * Element в строку, поскольку я могу использовать свойство .childNodes [x], чтобы пройти через все из них, но это все еще объекты, и я не могу показаться просто получите необработанный XML.

test.html:

<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
<script>
function startup() {
    svgOutput = document.getElementById("svgCanvas").getSVGDocument().documentElement;    
    console.log(svgOutput);
    document.getElementById("output").value = svgOutput;
}
</script>
</head>
<body style="margin: 0px;" onload="startup()">
<textarea id="output"></textarea><br/>
<embed src="svg1.svg"
    id="svgCanvas"
    width="75%" height="75%"
    type="image/svg+xml"
    codebase="http://www.adobe.com/svg/viewer/install"
></embed>
</body>
</html>

svg1.svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<image id="svgBackground" x="0px" y="0px" width="100%" height="100%" preserveAspectRatio="none" xlink:href="bg1.jpg"/>
<g id="1">
    <text id="shape" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">circle</text>
    <text id="elementName" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">Element 1</text>
    <circle id="circle" cx="12%" cy="34%" r="15" opacity="1" fill="grey" stroke="darkgrey" stroke-width="5px"/>
</g>
<g id="2">
    <text id="shape" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">circle</text>
    <text id="elementName" x="30" y="30" font-size="16pt" fill="black" visibility="hidden">Element 2</text>
    <circle id="circle" cx="21%" cy="63%" r="15" opacity="1" fill="grey" stroke="darkgrey" stroke-width="5px"/>
</g>
</svg>

Ответ 1

Вы можете использовать XMLSerializer для преобразования элементов в строку.

var s = new XMLSerializer();
var str = s.serializeToString(documentElement);

Ответ 2

Это проще сделать с jQuery следующим образом:

svgObject  // your SVGSVGElement

svgStringData = $(svgObject).html()  // will convert data of SVGSVGElement Object to string

Ответ 3

SVG является элементом DOM, поэтому вы можете просто использовать атрибут outerHTML элементов SVG, чтобы получить сериализованный HTML.

    var stringData = document.getElementById('my-svg').outerHTML;