Question

是否有D3.js方法将文本元素转换为路径元素？

因此，当我掌握生成的svg时，我可以保留文本形状。

Answer 1

JavaScript（d3或任何其他工具）无法访问有关系统或网络字体中单个字母形状的矢量路径信息。这是SVG 2的一个要求的功能，但没有确切的建议如何工作。

Raphael方法described in the question linked by Lars Kotthoff使用Cufon font generator utility使用已转换为JavaScript的字体对象。不幸的是，Cufon是为旧的IE VML语言设计的，而不是SVG，因此您需要添加额外的转换（或使用Raphael）来转换为SVG路径数据。

对于使用SVG，使用通用字体转换器工具转换为SVG字体，然后提取字形数据并将其转换（缩小到正确的大小并翻转y轴）可能同样容易。或者，如果您正在使用服务器，则可以考虑使用诸如Cairo之类的低级图形库，它可以进行文本到路径的转换。遗憾的是，浏览器中的SVG字体支持非常差，您无法使用它直接嵌入字体数据。（即使假设您有权分发字体，但由于其他原因未使用Web字体）。

更新：评论中提及Inkscape提醒我Inkscape also has a command-line interface to convert/export SVG files。您可以在服务器工作流程中使用它; text-to-path是导出选项之一。您必须找到一种设置方法，以便服务器上的Inkscape程序可以访问完整的字体，然后通过Inkscape将您的d3例程创建的SVG与以下选项一起移动：

inkscape TEMP.FILENAME --export-plain-svg=FILENAME --export-text-to-path

DOM中唯一的text-to-image选项是HTML canvas;你可以在画布上写，然后抓取图像数据。但这将是一个PNG图像，而不是矢量。

但是，我还建议您考虑是否确实需要特定字体中字母的确切形状，以及是否值得失去使用文本作为文本的功能，可访问性和SEO优势。

Answer 2

有一个名为text-to-svg的节点模块声称这样做：

将文本转换为没有本机依赖关系的SVG路径。

实施例

const TextToSVG = require('text-to-svg');
const textToSVG = TextToSVG.loadSync();

const attributes = {fill: 'red', stroke: 'black'};
const options = {x: 0, y: 0, fontSize: 72, anchor: 'top', attributes: attributes};

const svg = textToSVG.getSVG('hello', options);

console.log(svg);

D3js：如何将svg文本转换为路径？

2 个答案:

实施例