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

问题描述

我想使用CSS3，HTML Canvas或甚至SVG（例如下图）制作曲线文字效果？这可能吗？如果是，我该如何实现这种效果？

更新：澄清：将以这种方式设置样式的文本将是动态的。 / p>

解决方案

SVG直接支持文本在路径上，虽然它不会弯曲沿路径的各个字形。以下是您如何创建它的示例：

  ... 
< defs> 
< path id =textPathd =M10 50 C10 0 90 0 90 50/> 
< / defs> 
< text fill =red> 
< textPath xlink：href =＃textPath>路径上的文本< / textPath> 
< / text> 
 ... 
  

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 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屋！