<object>ノードからSVGルート要素とその子を取得してSVGをエクスポートします。

Question

私はSVGが好きなので、InkScapeで作成した請求モデルを作成しました。 私は新しいSVGをInkScapeで手動で行う必要なく作成したいと思う（日付、金額、顧客の電子メールなどを更新する）。

これは私が（このコードの多くSVGとJavscriptについて他のポストで見つかった場合）これまでに思い付いたものであることを達成するために：

それは簡単にするために、のは、私はHTMLページを持っているとしましょうボタンアクションで

<button onclick="addDownloadLink()">Add download hyperlink</button> 
<br /> 
<div id="exportLinkContainer"></div> 
<br /> 
<!-- Size is based on a ratio of 210x297 --> 
<object id="svgObject" data="./BillingModel.svg" type="image/svg+xml" width="630" height="891">No SVG support</object> 

私の課金モデルが表示され、私は

function addDownloadLink() { 
    var svgObject = document.getElementById("svgObject").contentDocument; 

    // THIS IS HERE where I can't find how to get the root svg element and all its attributs. 
    var svg = svgObject.getElementById("svg").innerHTML; 
    var svg2 = svgObject.getElementsByTagName("svg")[0].innerHTML; 
    console.log("svg: " + svg); 
    console.log("svg2: " + svg2); 

    var blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" }); 
    var dateNow = new Date().toLocaleDateString(); 
    var downloadLink = document.createElement("a"); 
    downloadLink.appendChild(document.createTextNode("Download " + dateNow)); 
    downloadLink.setAttribute("download", "BillingExport___" + dateNow + ".svg"); 
    downloadLink.setAttribute("target", "_blank"); 
    downloadLink.setAttribute("href-lang", 'image/svg+xml'); 
    downloadLink.setAttribute("href", URL.createObjectURL(blob)); 

    var exportLinkContainer = document.getElementById("exportLinkContainer"); 
    exportContainer.innerHTML = ''; 
    exportContainer.appendChild(downloadLink); 
} 

javascript関数を呼び出すと、ここBillingExportModel.svという名前の私のSVGファイルのexempleあるとG：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:cc="http://creativecommons.org/ns#" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
    sodipodi:docname="BillingExportModel.svg" 
    inkscape:export-filename="/Users/Racine/Desktop/facture_1703_microsoft.png" 
    height="297mm" 
    width="210mm" 
    inkscape:export-xdpi="202" 
    version="1.1" 
    inkscape:export-ydpi="202" 
    inkscape:version="0.91 r13725" 
    viewBox="0 0 210 297" 
    id="svg"> 
    <!-- My script manage to get everything here inside the SVG root element. I need to get its parent and all its attributs. --> 
    <!-- presentation stuff etc hidden because of not being usefull --> 
    <text 
     style="word-spacing:0px;letter-spacing:0px" 
     line-height="125%" 
     xml:space="preserve" 
     y="134.65009" 
     x="175.17645" 
     sodipodi:linespacing="125%" 
     id="text206"> 
     <tspan 
      id="TextArticleTotal" 
      sodipodi:role="line" 
      x="175.17645" 
      y="134.65009">1 450,00 €</tspan> 
    </text> 
    <!-- etc etc etc --> 
</svg> 

それはほとんど私がSVGのルート要素とビューボックスなどのようなすべてのattributsを取得するために管理していない。しかし、私はいいです、すべてのSVGコンテンツを持っていることをexpet動作します。

var内のスクリプト内のすべてのsvgルートノードをコピーして、それを連結することはできますが、私はこのソリューションに満足していないと思います。

すべてのヘルプは非常に感謝することでしょう。あなたが現在innerHTMLプロパティを持っており、ルート要素を取得するためのdocumentElementを使用） おかげ

Answer 1

代替outerHTML。 outerHTMLは子孫だけでなく、要素自体とその子孫を返します。

だから、現用回線は、次のとおりです。あなたは、特にする場合を除き、

var svgObject = document.getElementById("svgObject"); 
var svg = svgObject.documentElement.outerHTML; 

あなたはルート要素にIDを与える必要はありません。

イメージ/ svg + xmlへのhref-lang設定も間違っています。その値で設定する属性はtypeです。答えは簡単だった

Answer 2

（あなたロバートLongsonに感謝）：

var svgObject = document.getElementById("svgObject").contentDocument; 
var svg = svgObject.getElementById("svg").outerHTML; 

それをしないでください。 VAR svgObject =のdocument.getElementById（ "svgObject"）outerHTML。

Do：ルート要素にIDを追加します（Inksscapeはsvg2またはsvg3を使用する傾向があります）。