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

Question

有没有一种D3.js的方法可以将文本元素转换为路径元素？

这样，当我获取生成的SVG时，我可以保留我的文本形状。

- Hugolpz

---

也许这个问题能帮到你？ - Lars Kotthoff

回答你的问题，D3.js 没有将文本字符转换为路径的方法。 - Stephen Thomas

从字里行间看，似乎您担心在没有正确字体的系统中，SVG 的外观会有所不同？您考虑过将所使用的字体嵌入到 SVG 中吗？我进行了快速搜索，并在 Graphic Design SE 中的这个问题中讨论了这个问题：http://graphicdesign.stackexchange.com/questions/5162/how-do-i-embed-google-web-fonts-into-an-svg - Joe

是的，我担心其他人电脑上的外观。因为我在谈论中文开放字体（17MB），嵌入式不适合我的需求...但这将是SO社区的相关答案 :) - Hugolpz

@Joe-JW718和Hugolpz：Inkscape实际上有一个命令行界面，如果你可以将其集成到工作流程的其他部分中，它应该能够以编程方式进行转换。 - AmeliaBR

Answer 1

在JavaScript（d3或任何其他工具）中，无法访问系统或Web字体中单个字母形状的矢量路径信息。这是SVG 2的一个请求功能，但目前没有确定如何实现它的提案。

Raphael方法在Lars Kotthoff链接的问题中描述使用已转换为JavaScript的字体对象，使用Cufon字体生成器实用程序。不幸的是，Cufon是为旧版IE VML语言而设计的，而不是SVG，因此您需要添加额外的转换（或使用Raphael）来将其转换为SVG路径数据。

如果要使用SVG，可以使用通用字体转换工具将其转换为SVG字体，然后提取字形数据并进行转换（到正确的大小和翻转y轴）。或者，如果您正在服务器上工作，可以考虑使用低级别的图形库，如Cairo，它可以进行文本到路径转换。不幸的是，浏览器中对SVG字体的支持非常差，无法直接使用它来嵌入字体数据。（即使您有分发字体的权利，但由于其他原因而不使用Web字体）。

更新：评论中提到Inkscape让我想起了Inkscape也有一个命令行界面来转换/导出SVG文件。您可能可以在服务器工作流程中使用它；文本到路径是其中一种导出选项。您必须找到一种方法来设置它，以便您服务器上的Inkscape程序可以访问完整的字体，然后通过您的d3例程创建的SVG通过Inkscape进行穿梭，并使用以下选项：

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

在DOM中，唯一的文本转图像选项是HTML画布；您可以在画布上写字，然后获取图像数据。但这将是一个PNG图像，而不是矢量图。但我也建议您考虑一下是否真的需要特定字体中字母的确切形状，以及是否值得失去使用文本作为文本所带来的功能性、可访问性和SEO优势。

- AmeliaBR

---

+1，感谢反馈。我的主要问题是在通过程序生成数百个SVG时保持形状。我更喜欢输出SVG，但输出大型光栅图像也可能是一种选择/可能性。 - Hugolpz

感谢您提供这个好答案。赏金归您，同时也表示友好的感谢！ - Hugolpz

感谢@Hugolpz。很抱歉没有像您希望的那样简单的解决方案，但希望现在您可以探索其他解决问题的方法。 - AmeliaBR

不使用文本作为文本的一个用例是生成文本动画。 - David Spector

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

- Édouard Lopez

---

也许值得一提的是，许多模块以及甚至基于浏览器的实用工具都使用了令人难以置信的 https://opentype.js.org/ 库。（例如“随机”Web应用程序：https://formito.com/tools/favicon） - myf

但是这对于Unicode字符不起作用。正确吗？ - Mrug

@Mrug 我正在使用它来为各种脚本（例如带有拼音注释的中文）生成Ruby字体 https://github.com/parlr/ruby-font-creator/blob/master/src/ruby.js - Édouard Lopez

Answer 3

试试我的库 - svg-text-to-path

• 支持otf/ttf字体；
• 与Google Fonts集成；
• 支持tspan；
• 不同的字体库；
• 支持CSS text-anchor和dominant-baseline属性；
• 支持nodejs和浏览器运行时；

- PaulZi

---

哇！真是令人印象深刻，尤其是fontkit演示! 也许你可以提供一个简化的使用例子作为片段。svg-text-to-path是否也支持<textPath>转换？ - herrstrietzel

你好！let session = new Session(''); await session.replaceAll(); console.log(session.getSvgString());目前不支持<textPath>。 - PaulZi

Answer 4

所有上面提到的文本转SVG节点模块都使用opentype.js。

我决定直接使用它，并取得了巨大的成功：

https://github.com/opentypejs/opentype.js#pathtosvgdecimalplaces

- Ray Hulha