SVG。从文本中获取路径答案

【问题标题】：SVG. Get paths from textSVG。从文本中获取路径
【发布时间】：2013-01-14 09:39:09
【问题描述】：

是否可以像这样转换 SVG 文本：

<g transform="translate(185 185)">
    <text font-family="'Wednesday'" font-size="40" font-weight="100"
          style="stroke: none;  stroke-width: 1; stroke-dasharray: ; fill: rgb(0,0,0); opacity: 1;"
          transform="translate(-78.5 -28.48)">
        <tspan x="0" y="41.1" fill="rgb(0,0,0)">Test text</tspan>
    </text>
</g>

使用 javascript 到 SVG 路径？独立于字体可用性。

谢谢

【问题讨论】：

能否请您在 SVG 中添加一些换行符以使其可读
文本是动态的吗？这在 Inkscape 或 Illustrator 中很容易做到，但使用 javascript，只有在使用 SVG 字体时才能做到（这并不容易）。
本文使用Cufon和Fabric.js编写。这个想法是将字体独立数据发送到服务器。
Cufon 下面包含字形路径数据。但是 Cufon 在 Fabric 中被弃用，取而代之的是原生 canvas 方法，原生方法不提供此类数据。
@kangax 有没有办法从 cufon 或其他库获取字形路径？我还没有找到在 fabric.js 中使用外部字体的本地方法。顺便说一句 kangax 感谢您提供如此出色的框架。

标签： javascript canvas svg converter

【解决方案1】：

opentype.js 可以采用字体并将其分解为路径。它与 svg 或 canvas 无关

【讨论】：

我一直在使用 opentype js 将 SVG 文本转换为路径，我必须说它工作得很好。我面临的唯一问题是粗体、斜体等格式选项。
不是这样吗？我想你可以想出一个算法......就像粗体一样，你会取切线（基于我猜的控制点），并将其扩展......或使用 svg 形态。对于斜体，我想你会做一个线性移位（基于 y 分量）（比粗体更容易）。
我们可以使用一种解决方法，对粗体和斜体使用单独的字体。例如，Arial 对粗体和斜体有单独的 ttf。