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

Question

我用 InkScape 制作了一个计费模型（因为我喜欢 SVG）。我想生成新的 SVG 而不必在 InkScape 中手动生成（更新日期、金额、客户电子邮件等）。

为了实现这一点，这就是我到目前为止提出的（很多代码是在其他 post 上找到的关于 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 根元素和所有属性，如 viewbox 等。但我拥有所有 SVG 内容，这很好。

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

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

Answer 1

在您当前拥有 innerHTML 的位置替换 outerHTML 并使用 documentElement 获取根元素。 outerHTML returns 元素本身及其后代，而不仅仅是后代。

所以工作线是：

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

你不需要给根元素一个 id 除非你特别想要。

顺便说一句，将 href-lang 设置为 image/svg+xml 也是错误的。使用该值设置的属性是类型。

Answer 2

答案很简单（谢谢 Robert Longson）：

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

不要这样做： var svgObject = document.getElementById("svgObject").outerHTML;

做：向根元素添加一个 id（注意，Inksscape 倾向于使用 svg2 或 svg3）。

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

Get SVG root element and its children from an <object> node to export SVG with dynamic content

javascript

svg

export

getelementbyid