SVG：沿弯曲路径附加形状答案

【问题标题】：SVG: append shapes along curved pathSVG：沿弯曲路径附加形状
【发布时间】：2017-07-07 16:39:27
【问题描述】：

我目前处于需要附加文本以遵循 SVG 中的弯曲路径的情况。我们的目标是允许用户动态输入将沿弯曲路径显示的文本。通常我会使用textPath method，但问题是——要按照我们的设计者指定的方式呈现文本——我们需要将文本转换为路径（可能使用 Opentype 之类的东西）。我不希望将形状附加到 textPath 会起作用（它没有），但我不确定从这里到哪里去达到同样的目的。

<svg viewBox="0 0 1000 300"
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
 <path id="MyPath"
  d="M 100 200 
  C 200 100 300   0 400 100
  C 500 200 600 300 700 200
  C 800 100 900 100 900 100" />
</defs>

<use xlink:href="#MyPath" fill="none" stroke="red"  />

<text font-family="Verdana" font-size="42.5">
 <textPath xlink:href="#MyPath">
  <rect class="sq-1" height="50" width="50" x="0" y="0"/>
  <rect class="sq-2" height="50" width="50" x="100" y="0"/>
  <rect class="sq-3" height="50" width="50" x="200" y="0"/>
 </textPath>
</text>

<rect x="1" y="1" width="998" height="298" fill="none" stroke="black" stroke-width="2" />
</svg>

Here is a fiddle 用于上述示例。

【问题讨论】：

w3.org/2013/10/SVG_in_OpenType

标签： svg

【解决方案1】：

在浏览器中没有办法做到这一点——至少无论如何都没有内置。在我看来，您的选择是：

希望有一个可以将<textPath> 转换为<path> 的Javascript 库。我不知道。 JS 无权访问字体几何或度量。库必须自己解析字体。
查找或编写一个可以将<path> 元素沿<path> 分发的Javascript 库
在服务器上有一个后处理脚本，通过 Inkscape、Illustrator 等运行 SVG 以执行转换为路径的步骤。

【讨论】：