如何使用nodejs将svg节点保存到文件中？

Question

我正在使用一个小的辅助包——https://www.npmjs.com/package/d3-node，来使用d3技术。

我使用d3-node创建了我的svg文件，以下是代码。

const D3Node = require('d3-node')

var d3n = new D3Node()
var svg = d3n.createSVG()
    .style("width","1920px")
    .style("height","1080px") 
    .attr("preserveAspectRatio","true")
.html(firstTemplate)
.append("myCustomTag")

现在，我完全不知道如何保存输出结果。主要问题出现在myCustomTag中。

console.log(d3n.d3Element.select("svg").node().innerHTML)

这行代码应该输出我的svg，它确实输出了，但是myCustomTag变成了mycustomtag，导致我的svg损坏。

我尝试过select("svg").node().outerHTML，select("svg").html()，innerText等方法，但是都没有解决问题。

在这种情况下，我不能使用innerHTML，是否有一种方法可以直接从d3变量中存储svg文件？

- Zee

Answer 1

您可以使用XmlSerializer，因为SVG是XML格式，而XML是大小写敏感的。像这样的代码对我有用:

const D3Node = require('d3-node');
const xmlserializer = require('xmlserializer');

const d3n = new D3Node();
var svg = d3n.createSVG()
    .style("width","1920px")
    .style("height","1080px")
    .attr("preserveAspectRatio","true");

svg.append("myCustomTag");

console.log(xmlserializer.serializeToString(svg.node()));

HTML不区分大小写，因此当您尝试使用HTML方法对事物进行序列化时，您可能无法得到您想要的结果。

- Robert Longson