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

这是我的svg文件的例子，名为BillingExportModel.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内容都很好。

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

任何帮助都会非常感激;）感谢

Answer 1

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

所以工作线是：

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

除非你特别想要，否则你不需要给root元素一个id。

另外，设置href-lang到image / svg + xml也是错误的。使用该值设置的属性是type。

Answer 2

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

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

不要这样做： var svgObject = document.getElementById（＆＃34; svgObject＆＃34;）。outerHTML;

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

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

2 个答案: