有没有办法使用 CSS3/Canvas 来弯曲/弧形文本 [英] Is there a way to curve / arc text using CSS3 / Canvas

问题描述

我正在尝试使用 CSS3、HTML Canvas 甚至 SVG 制作弯曲文本效果(例如，请参见下图)?这可能吗?如果是这样，我怎样才能达到这个效果?

I'm trying to make a curved text effect using CSS3, HTML Canvas, or even SVG (see image below for example)? Is this possible? If so, how can I achieve this effect?

更新:澄清:以这种方式设置样式的文本将是动态的.

Update: To clarify: The text that will be styled this way will be dynamic.

推荐答案

SVG 直接支持路径上的文本，尽管它不会沿路径弯曲"各个字形.下面是关于如何创建它的示例:

SVG supports text-on-a-path directly, though it does not 'bend' the individual glyphs along the path. Here's an example of how you create it:

...
<defs>
  <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
<text fill="red">
  <textPath xlink:href="#textPath">Text on a Path</textPath>
</text>
...

这篇关于有没有办法使用 CSS3/Canvas 来弯曲/弧形文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！