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

【问题标题】：D3js : How to convert svg text to path?D3js：如何将 svg 文本转换为路径？
【发布时间】：2014-12-23 01:03:58
【问题描述】：

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

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

【问题讨论】：

也许this question 有帮助？
回答您的问题，没有 D3.js 方法可以将文本字符转换为路径。
字里行间，您似乎担心 SVG 在没有正确字体的系统中看起来会有所不同？您是否考虑过将使用的字体嵌入到 SVG 中？我已经进行了快速搜索，这在 Graphic Design SE graphicdesign.stackexchange.com/questions/5162/… 的这个问题中进行了讨论
是的，我担心别人电脑的外观。当我谈到中文开放字体（17MB）时，嵌入将不适合我的需要....但将是 SO 社区的相关答案:)
@Joe-JW718 & Hugolpz：Inkscape 实际上有一个 command-line interface，如果您可以将其集成到工作流程的其余部分中，它应该能够以编程方式进行转换。

【解决方案1】：

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

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

对于 SVG，使用通用字体转换器工具转换为 SVG 字体，然后提取字形数据并将其转换（到正确的大小并翻转 y 轴）可能同样容易。或者，如果您在服务器上工作，您可以考虑使用低级图形库，例如 Cairo，它可以进行文本到路径的转换。不幸的是，浏览器对 SVG 字体的支持太差了，以至于您不能使用它直接嵌入字体数据。（即使假设您有权分发字体，但由于其他原因没有使用网络字体）。

更新： cmets 中提到 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 优势。

【讨论】：

+1 感谢您的反馈。我的主要问题是在以编程方式生成数百个 svg 的同时保持形状。我更喜欢输出 svg，但输出大栅格也可能是一种领先/可能性。
感谢您的回答。赏金是你的，也是一个友好的谢谢！
谢谢@Hugolpz。抱歉，没有您希望的简单解决方案，但希望您现在可以研究解决问题的其他方法。
不将文本用作文本的用例是生成文本动画。

【解决方案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);

【讨论】：

也许值得一提的是这个模块以及许多其他——甚至是基于浏览器的——实用程序正在使用令人难以置信的opentype.js.org 库。（“随机”基于网络的应用程序，例如：formito.com/tools/favicon）
但这不适用于 Unicode 字符。正确吗？
@Mrug 我正在使用它为各种脚本（例如带有拼音注释的中文）生成ruby字体github.com/parlr/ruby-font-creator/blob/master/src/ruby.js

【解决方案3】：

还有一个新添加的名为svg-text-to-vector 的节点模块肯定会这样做。您只需提供 svg 文件，它就会返回它，并将其中的所有文本标签转换为路径。

您可以加载并保存为文件、Base64、缓冲区或SVG字符串。

示例

var options={
load:'file.svg',
save:'file-convert.svg'
}   

const convert = await svgTextPath.getPath(options);

还支持在运行时和手动添加字体。从 svg-text-to-vector/config/fonts.json 文件中加载字体名称和路径

运行时

动态添加带有 json 键/值 {"name", "path"} 的字体。每个字体只需要添加一次以供将来使用。

var font={'name':'Lexend Tera','path': '/lexend_tera.ttf'};

const addFonts = await svgTextPath.push(font);

手动

打开 svg-text-to-vector/config/fonts.json

{ "字体":[ { "name":"时代新罗马", “路径”：“./public/fonts/times.ttf” } ] }

只需向 json 添加更多字体

{ "字体":[ { "name":"时代新罗马", “路径”：“./public/fonts/times.ttf” }, { “名称”：“安东”， “路径”：“./public/fonts/anton.ttf” } ] }

Click here for convert to path sample file

【讨论】：