20

答えを探しましたが、SVGSVGElementを文字列に変換する方法が見つかりません。Chrome（22）を使用しています。これまでに回答されたことがあることをお詫びしますが、（ここまたはGoogleで）見つけることができませんでした。

HTMLページにSVG（XML）画像が埋め込まれていて、Javascriptを使用してSVGを操作しています（図形の追加/削除など）。私の目標は、変更されたSVG XMLイメージをメモリに取り、それをファイルに保存することです（phpフォームに投稿することによって）。postとphpフォームは機能していますが、私が現在抱えている問題は、変更されたSVGイメージの文字列表現を取得できないことです。

ロードされたSVGから生のXMLを取得してテキストエリアに貼り付けようとしている簡略化されたページを以下に投稿しました。以下のhtmlをテストすると、textareaに文字列" [objectSVGSVGElement] "が含まれていることがわかります。

Javascriptを使用してSVGの各要素にアクセスし、要素と属性を操作することはできますが、すべてを文字列にまとめることはできないようです。JQueryとJQuerySVGを試しましたが、動作させることができませんでした。console.log（）はsvg / xmlを表示できますが、文字列ではないため、保存/送信できないようです。どんな援助も大歓迎です！

.childNodes [x]プロパティを使用してすべてをトラバースできるため、SVG * Elementオブジェクトを文字列に変換する方法を選択することもできますが、これらはまだオブジェクトであり、生の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>
4

3 に答える 3

22

XMLSerializerを使用して、要素を文字列に変換できます。

var s = new XMLSerializer();
var str = s.serializeToString(documentElement);
于 2012-10-12T19:12:57.867 に答える
6

SVGはDOM要素であるため、SVG要素の属性を使用するだけouterHTMLでシリアル化されたHTMLを取得できます。

    var stringData = document.getElementById('my-svg').outerHTML;
于 2019-02-02T14:55:15.933 に答える
0

次のようにjQueryを使用する方が簡単です。

svgObject  // your SVGSVGElement

svgStringData = $(svgObject).html()  // will convert data of SVGSVGElement Object to string
于 2014-03-19T10:40:03.543 に答える