svg - 我可以使用 SVG 创建书法外观吗？

Question

是否可以使用 SVG 创建具有动态宽度的笔画？我想在此处、此处或此处实现书法外观。

这甚至可能吗？似乎 SVG 中笔画的自定义是相当有限的。甚至笔画中的渐变似乎也很重要（请参阅此处）。

Answer 1

有一个建议将一种机制添加到 SVG 标准中，这正是您想要的：

• http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke
• http://lists.w3.org/Archives/Public/www-svg/2013May/0041.html

这里甚至还有一个示例实现：

• https://rawgit.com/birtles/curvy/master/index.html

然而，这绝不是官方的，我们甚至无法确定它是否会成为官方。

---

在此之前，您需要坚持使用 Bezier 曲线和对象填充：

---

您还可以使用书法字体，例如 - Google CDN上提供的 Tangerine ：

这种方法需要较少的工作，因为您不需要从头开始绘制所有内容，但是再一次，使用第三方字体使您几乎无法控制最终结果。

Answer 2

您不能动态调整路径元素的笔触。但是，您可以绘制一条路径，在其上使用填充颜色而不是描边，然后在距离原始线条稍远的地方将字母加倍。

此外，如果您在网络上使用 SVG，那么您可以在文本元素上使用 css 字体。有一些不错的草书字体可以免费使用……只需查看谷歌网络字体。