我们可以使用SVG中内置的三个工具沿曲线流动文本: <path>
, <text>
和<textPath>
。
摘录
<svg viewBox="0 0 500 500">
<path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath alignment-baseline="top" xlink:href="#curve">
Dangerous Curves Ahead
</textPath>
</text>
</svg>
我们如何到达那里
想象一下,我们在SVG中绘制一条曲线,并为其指定了一个名为curve
的ID。
请参阅CodePen上的Geoff Graham( @geoffgraham ) 撰写的Pen NgwPYB 。
然后,使用<text>
标记将内容放入SVG中,并为其提供与SVG viewBox
尺寸匹配的宽度。 我们还什么都看不到,但是我们知道文本在屏幕外的某个地方。
在CodePen上查看Geoff Graham( @geoffgraham ) 撰写的Pen ZyaYOw 。
我们真的很想看到该文本。 我们可以将文本包装在<textPath>
标记中,并通过调用我们先前设置的路径ID将其设置为遵循弯曲路径的线。
请参阅CodePen上的Geoff Graham( @geoffgraham ) 撰写的Pen Kqywpe 。
现在,我们正在用天然气烹饪!
我们不希望看到该曲线,因此让该路径透明填充。 我们也可以在CSS中执行此操作,但出于此示例的目的,我们将其直接内联地应用到SVG标记中。
请参阅CodePen上的Geoff Graham( @geoffgraham ) 撰写的Pen xrPbgx 。
剩下的就是CSS! 确切的字体大小将取决于文本本身以及所使用的字体系列,但是,一旦达到适当的平衡,SVG本身将处理响应能力,并确保所有内容均以任意比例停留在曲线上。
见笔SVG的文本沿曲线路径由杰夫·格雷厄姆( @geoffgraham )上CodePen 。
我们可以将相同的方法应用于任何类型的弯曲路径。
见笔SVG的文本沿曲线路径由杰夫·格雷厄姆( @geoffgraham )上CodePen 。
翻译自: https://css-tricks.com/snippets/svg/curved-text-along-path/