从节点获取 SVG 根元素及其子元素<object>，以导出包含动态内容的 SVG

Question

我用InkScape制作了一个计费模型(因为我喜欢SVG(。我想生成新的 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>

在按钮操作上，我调用一个 javascript 函数

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);
}

这是我名为BillingExportModel的svg文件的示例.svg：

<?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 根元素和所有属性(如视图框等(几乎可以正常工作。但是我有所有的SVG内容，这很好。

我仍然可以在 var 中复制脚本中的所有 svg 根节点，并将其与我设法拥有的连接起来，但我对这个解决方案不满意，并认为我可以做得更好。

任何帮助将不胜感激;)谢谢

Answer 1

替换当前

具有 innerHTML 的 outerHTML 并使用 documentElement 获取根元素。 outerHTML 返回元素本身及其后代，而不仅仅是后代。

所以工作线是：

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

除非特别需要，否则不需要为根元素指定 id。

作为旁白，将href-lang设置为image/svg + xml也是错误的。使用该值设置的属性是类型。

Answer 2

答案很简单(谢谢罗伯特·朗森(：

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

别这样： var svgObject = document.getElementById("svgObject"(.outerHTML;

执行：在根元素中添加一个id(请注意，Inksscape倾向于使用svg2或svg3(。