HTML文書の動的に変更されたSVG要素の文字列を取得する方法は？

Question

svg要素を動的に編集するjavascriptを記述しました。私は編集されたsvg要素の新しい文字列を取得したいが、現在私のコードは失敗する。 HTML文書の文字列形式を取得するには、次のコードがあります。

var txt = document.documentElement.innerHTML; 

私はSVG要素のinnerHTMLがほしいと思うだけです。次のコードを試しましたが、 "undefined"というエラーメッセージが表示されます。

var svgnode=document.getElementById("svgnode1"); 
alert(svgnode.innerHTML); 

どうすればよいですか？このエラーはGoogle Chromeで発生しますが、どのブラウザでも動作するソリューションが必要です。

Answer 1

innerHTML HTMLドキュメントで定義されていますが、他の種類のXML DOMでは定義されていません。

innerHTMLにはSVGのような機能がいくつか計画されています。 http://www.w3.org/Graphics/SVG/WG/wiki/SVG_2_DOM#innerHTML_type_facilities：

innerHTMLプロパティの型施設

XMLがinnerHTML様な特徴を持っていた場合、それは良いでしょう。 ECMAScript文字列にマークアップを書くことは少し難しいかもしれませんが、物事を単純化することもできますし、シナリオのタイプが有用である可能性もE4Xのような機能を意味するようになることがあります。

この施設innerHTMLを呼び出すと、マークアップがXHTML名前空間にあると解析されなければならない、ので、多分innerMarkupまたはinsertCodeが良い名前だろう、または、textContentとの対称性のために、多分markupContentようにそれが見えるようになります。

何が必要であれば をDOMツリーを文字列にシリアライズするhttps://developer.mozilla.org/en/Parsing_and_serializing_XML

• XMLSerializerを参照して、XMLの文字列にSVGを有効にする方法、または他のXML DOMです

  またはhttps://stackoverflow.com/a/4916895/20394（IE相当）。

Answer 2

（グーグルChromeとIE 11でテスト済み）いくつかの実際のコード：

<object id="sv" data="Switzerland_regions.svg" type="image/svg+xml"> 
    <!-- <img src="yourfallback.jpg" />--> 
</object> 


<script type="text/javascript"> 
     var S = document.getElementById("svgnode1") 

     var markup = (new XMLSerializer()).serializeToString(S.contentDocument.rootElement); 
     console.log(markup); 


     // var SD = S.getSVGDocument(); 

     // var circle1 = SD.getElementById("GR"); 
     // console.log(circle1); 
     // circle1.style.fill = "grey"; 

     //var rectangle = SD.querySelector("#layer4"); 
     //var parent = rectangle.parentNode; 
     //parent.removeChild(rectangle); 
</script>