2012-10-12 21 views
11

私はすべての答えを探しましたが、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> 

答えて

13

あなたは、文字列に要素を変換するために、XMLSerializerを使用することができます。

+1

私は唯一のMozillaに働いたと思ったが、それは間違いなくだけでなくIE9とChromeのために働くように見えます。十分な公正、ありがとう! – ssvyper

1

それは次のようにjQueryを使って行う方が簡単です:

svgObject // your SVGSVGElement 

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

内部的にJQueryはinnerHTML()を呼び出すだけで、IEのSVGオブジェクトで呼び出されたときにエラーをスローします。 –

関連する問題