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

Question

是否可以使用SVG创建动态宽度的笔划？我希望书法看起来像here，here或here。

这甚至可能吗？似乎SVG中笔画的定制相当有限。即使是笔画中的渐变似乎也不重要（参见here）。

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字体。有一些非常好的草书字体可以免费使用...只需检查谷歌网络字体。