Szukałem odpowiedzi, ale nie mogę znaleźć sposobu przekonwertowania wartości SVGSVGElement na ciąg znaków. Używam Chrome (22). Przepraszam, jeśli wcześniej udzielono odpowiedzi, ale nie udało mi się go znaleźć (tutaj lub w Google).Konwertuj SVGSVGElement na ciąg
Mam obraz SVG (XML) osadzony na stronie HTML i manipuluję SVG przy pomocy Javascript (dodawanie/usuwanie kształtów itp.). Moim celem jest przeniesienie zmodyfikowanego obrazu SVG XML do pamięci i zapisanie go w pliku (poprzez publikację w formularzu php). Post i formularz php działają, ale problem, który obecnie mam, polega na tym, że nie mogę uzyskać reprezentacji ciągów zmodyfikowanego obrazu SVG.
Zamieszczam uproszczoną stronę poniżej, gdzie próbuję uzyskać surowy XML z załadowanego SVG i wkleić go do textarea. Jeśli przetestujesz HTML poniżej, zobaczysz, że textarea zawiera ciąg: "[obiekt SVGSVGElement]".
Mogę uzyskać dostęp do każdego elementu w SVG za pomocą Javascriptu i manipulować elementami i atrybutami, ale nie mogę po prostu umieścić całej rzeczy w ciągu znaków. Próbowałem JQuery i JQuery SVG, ale nie udało mi się go uruchomić. console.log() jest w stanie pokazać svg/xml, ale nie jest ciągiem, więc nie mogę go zapisać/wysłać. Każda pomoc jest bardzo cenna!
Spróbuję nawet przekonwertować dowolny obiekt SVG * Element na ciąg znaków, ponieważ mogę użyć właściwości .childNodes [x] do przechodzenia przez wszystkie z nich, ale są to nadal obiekty i nie mogę się wydawać po prostu uzyskać surowy 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>
Myślałem, że działa tylko na Mozilli, ale wygląda na to, że na pewno działa dla IE9 i Chrome, jak również. W porządku, dziękuję! – ssvyper