我用 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 根元素和所有属性,如 viewbox 等。但我拥有所有 SVG 内容,这很好。
我仍然可以将脚本中的所有 svg 根节点复制到一个 var 中,并将其与我设法拥有的连接起来,但我对这个解决方案不满意,认为我可以做得更好。
任何帮助将不胜感激;) 谢谢
最佳答案
替代outerHTML您当前拥有 innerHTML 并使用 documentElement 获取根元素的位置。 outerHTML 返回元素本身及其后代,而不仅仅是后代。
所以工作线是:
var svgObject = document.getElementById("svgObject");
var svg = svgObject.documentElement.outerHTML;
除非特别需要,否则不需要为根元素提供 id。
顺便说一句,将 href-lang 设置为 image/svg+xml 也是错误的。使用该值设置的属性是类型。
关于javascript - 从 <object> 节点获取 SVG 根元素及其子元素以导出具有动态内容的 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44446199/