沿路径弯曲的文字

我们可以使用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/