私はすべての答えを探しましたが、SVGSVGElementを文字列に変換する方法が見つかりません。私はChromeを使用しています(22)。私はこれまでにこれが答えられているが、私はそれを見つけることができなかった場合(ここまたはGoogleで)謝罪します。SVGSVGElementを文字列に変換する
私はSVG(XML)イメージをHTMLページに埋め込み、SVGをJavaScriptで操作しています(シェイプの追加/削除など)。私の目標は、変更されたSVG XMLイメージをメモリに保存し、ファイルに保存することです(PHPフォームに投稿することによって)。投稿とPHPフォームが動作していますが、現在私が問題になっているのは、変更されたSVGイメージの文字列表現を取得できないということです。
ロード済みのSVGから生のXMLを取得してテキストエリアに貼り付けようとしているところで、単純化したページを投稿しました。下のhtmlをテストすると、テキストエリアに文字列 "[object 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>
私は唯一のMozillaに働いたと思ったが、それは間違いなくだけでなくIE9とChromeのために働くように見えます。十分な公正、ありがとう! – ssvyper