Question

我目前处于这样一种情况，我需要在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以上示例。

Answer 1

在浏览器中无法做到这一点 - 至少不是内置的。在我看来，你的选择是：

希望有一个可以将<textPath>转换为<path>的Javascript库。我不知道。 JS无法访问字体几何或指标。该库本身必须解析字体。
找到或写一个可以在<path>

<path>

在服务器上有一个后处理脚本，通过Inkscape，Illustrator等运行SVG来执行转换到路径步骤。

SVG：沿曲线路径追加形状

1 个答案: