沿着路径弯曲文本 | CSS-Tricks

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

查看 Geoff Graham 在 CodePen 上创作的笔 NgwPYB（@geoffgraham）。

然后，我们使用 <text> 标签将内容放入 SVG 中，并为其提供与 SVG viewBox 尺寸匹配的宽度。我们现在还看不到任何内容，但我们知道文本在屏幕外的某个地方。

查看 Geoff Graham 在 CodePen 上创作的笔 ZyaYOw（@geoffgraham）。

我们确实想看到那个文本。我们可以将文本包装在 <textPath> 标签中，并将其设置为跟随我们之前设置的曲线路径的线条，方法是调用我们之前设置的路径 ID。

查看 Geoff Graham 在 CodePen 上创作的笔 Kqywpe（@geoffgraham）。

现在我们开始做正事了！

我们不希望看到该曲线，因此让我们为路径设置透明填充。我们也可以在 CSS 中执行此操作，但为了本例的说明，我们将其内联直接应用于 SVG 标记中。

查看 Geoff Graham 在 CodePen 上创作的笔 xrPbgx（@geoffgraham）。

剩下的就是 CSS！确切的字体大小将取决于文本本身以及使用的字体系列，但是，一旦找到合适的平衡，SVG 本身将处理响应能力并确保所有内容在任何比例下都保持在曲线上。

查看 Geoff Graham 在 CodePen 上创作的笔沿着弯曲路径的 SVG 文本（@geoffgraham）。

我们可以将此相同的方法应用于任何类型的曲线路径。

查看 Geoff Graham 在 CodePen 上创作的笔沿着弯曲路径的 SVG 文本（@geoffgraham）。

Brandon Smith

# 2017年6月27日

不错！我关注此网站的部分原因是它让我了解到我从未在其他任何地方听说过的晦涩/前沿的 Web 标准。

Joe Weaver

评论永久链接# 2017年6月28日

同样，老实说。

大约 5 年来我一直很喜欢这个网站，因为我总是可以依靠它来指引我！ *点赞*

# 2017年6月28日

哇，比 2012 年这篇 CSS-Tricks 文章中的方法简单多了：在圆圈上设置文本。SVG 万岁。

goose

# 2017年6月28日

现在，如果您能弄清楚如何在 Canvas 中执行此操作，那么您将成为许多人的英雄！

Velenir

# 2017年7月1日

作为 fill="transparent" 的替代方案，并且可能在语义上更正确，您可以将 <path/> 包裹在 <defs></defs>（或 symbol，它还有其他用途）中

<defs>
  <path id="curve" .../>
</defs>

内部的任何内容都不会呈现，但可以从外部引用。

Memphis

# 2017年9月20日

好文章！但我有一个问题， “path” 中的 “d” 属性是什么？如何更改圆圈的角度？
谢谢

Geoff Graham

评论永久链接# 2017年9月20日

您好！d 通过指定路径上的点来定义 SVG 路径的绘制方式

https://mdn.org.cn/en-US/docs/Web/SVG/Attribute/d

您可以尝试直接在 SVG 代码中更改曲率（有些人非常擅长此操作！），但老实说，在 Illustrator 或 Sketch 等应用程序中绘制路径、将其导出为 SVG，然后从那里获取代码要容易得多。
Solange

评论永久链接# 2019年9月17日

您无需更改圆圈的角度。您只需创建另一个路径即可！:-D

Adiyna

# 2018年1月27日

这太棒了！谢谢！现在，如果我想使用彩虹文本怎么办？我正在使用这个

.rainbow{
    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
    }

但我只能将其放在 span 元素中才能获得我想要的彩虹外观。我真的不想单独处理每个字母。我喜欢渐变外观……请帮忙！:-)

Adiyna

评论永久链接# 2018年1月27日

更新：我想出了一个解决方法，但我仍然想知道这个问题的答案，因为我发现它非常有趣！

David Krause (@thoughtassassin)

# 2018年10月8日

这是一个小动画。我一直想学习如何在 css 中沿路径动画化文本！https://codepen.io/thoughtassassin/pen/aRBJWM

Leo

# 2019年1月10日

谁能解释一下 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″ 代表什么？

Geoff Graham

评论永久链接# 2019年1月10日

您好，Leo！这些控制着路径的形状，在本例中，就是曲线。SVG 归根结底是代码，而这就是特定路径的代码。

如果您想知道如何编写这些代码，请不要担心，因为我们大多数人都不懂。当 SVG 导出时，我们从使用的插图程序（无论是 Illustrator、Sketch 还是其他一些应用程序）中获取这些代码。

MSCAU

# 2019年2月3日

不错。您将如何确保文本在 textPath 上居中对齐？设置 text-anchor: middle 无法正常工作，因为它仍然在路径上左对齐，最左侧的 50% 被隐藏。

MSCAU

评论永久链接# 2019年2月3日

我发现可以通过在 textPath 元素上添加属性 startOffset=”50%” 并在文本元素上添加上述 CSS text-anchor: middle 来实现。

Antanas Marcelionis

# 2019年2月5日

您现在可以使用 amCharts 来实现：https://codepen.io/team/amcharts/pen/MLEKVK

James Shields

# 2019年4月26日

做得非常好！
我正在寻找一种方法，在圆形框架中显示一组图像，并在框架周围显示标题。
嵌入每个标题的 SVG 代码是否是一种可行的方法，还是我在自找麻烦？

Geoff Graham

评论永久链接# 2019年4月26日

好问题！我认为这是一种非常好的方法。事实上，如果您查看此网站的评论表单，您会看到类似的内容，其中包含行为准则元素。:)

# 2019年5月30日

如何使路径不可见？

Geoff Graham

评论永久链接# 2019年5月31日

查看“我们是如何做到的”部分中的第四个示例。添加了透明填充以移除默认黑色。:)

erkkip

# 2019年6月1日

好技巧！

在找到本教程后，我今天稍微修改了一下 svg 动画。

示例代码，文本如何沿曲线路径移动

移动文本是交互式的

emre

# 2019年6月17日

您好，希望您一切安好。我需要问一个问题；我有一个在线设计网站，其中包含许多产品模板。问题是，当使用SVG输入圆形设计时，弯曲文本的位置会发生扭曲。这是为什么？如果您能帮我解决这个问题，那就太好了。提前感谢。

Bilal

# 2020年1月8日

我们能否也为乌尔都语或阿拉伯语单词添加曲线？如果可以，怎么做？

Rosemary Bartolini

# 2020年4月14日

这是代码。

如果这是一条重复的消息，我深感抱歉，但我认为我的第一条消息没有包含我粘贴的代码。当我预览时，它消失了（叹息）我正在使用一个主题，其中有一段代码我不理解。我希望您能帮助我，因为我自己无法解决它。我即使它在我的屏幕上消失也会发送。也许您仍然可以看到它 - 我希望如此
提前感谢，
Rosemary

Anders Kitson

# 2020年4月28日

如何在不手动更改字母间距的情况下将文本拉伸到整个路径上，当您希望它始终拉伸到末尾时，它在响应式方面效果不佳。

tyler

# 2020年5月12日

嗨，谢谢这个！我想知道如何更改textpath的颜色？

Alberto Jaramillo

# 2020年9月26日

很棒的解释！谢谢。我有一个快速的问题，我正在尝试在路径上使用text-anchor，但是，当我使用“middle”时，文本的一半消失了。当我使用“start”时，我可以看到整个文本。我可能做错了什么？

Geoff Graham

评论永久链接# 2020年9月28日

嗨，Alberto！当text-anchor设置为“middle”时，它是相对于<text>元素的当前位置，该位置由x属性设置。如果我们说我们想在中间锚定，我们的意思是我们想将文本元素的中间对齐到x属性的值。这就像将文本元素向左滑动，直到到达中间锚点，这就是您看到它被截断的原因。将其设置为“start”，锚点位于文本元素的左边缘，从而显示完整的内容。

将其想象成在一块软木板上钉住一张纸。假设我们在板上画了一个标记，表示我们想要在哪里钉住一张纸。如果我们将图钉放在纸的中间，然后将其粘贴到我们在板上画的标记上，纸张将以一种方式定位。如果我们将图钉移到纸张的“开始”，然后重新将纸钉到板上，它将以另一种方式定位。

Eric

# 2020年11月2日

嗨，Geoff，这太棒了，谢谢！如果这个问题已经被问过，我深感抱歉 - 我想知道如何让文本沿着这条路径动画？我希望曲线保持静态，但文本“爬行”在上面，如果你愿意的话。有什么入门提示吗？再次感谢！

Anastasia

# 2021年3月6日

嗨，这太棒了！

如何设置路径，使文本曲线反转，像船形一样，使半圆翻转？

Geoff Graham

评论永久链接# 2021年3月8日
嗨，Anastasia！您需要更改路径中的点，使其以另一种方式弯曲。我手动在代码中执行此类操作非常糟糕，因此我会获取该SVG代码，将其放入Sketch或Figma之类的工具中，编辑曲线，然后导出新代码。

那么，也许可以这样代替？

Joana

# 2021年3月30日

很棒的教程！您能否也做一个关于如何在心形或螺旋形文本中制作文本的教程，例如在此示例中
https://www.mockofun.com/tutorials/curved-text-generator/

Jayden

# 2021年5月19日

您在弯曲粗体文字中使用了什么文本？

Geoff Graham

评论永久链接# 2021年5月19日

它叫做Luckiest Guy——您可以直接在Google Fonts上获取它。

Joseph

# 2022年1月25日

使用两个textPath会导致它们重叠

偏移其中一个的代码是什么？

Rokus

# 2022年2月15日

如何更改每个字母的颜色？

Geoff Graham

评论永久链接# 2022年2月16日

我会说就像您对任何其他文本一样。Chris在这篇文章中阐述了几种方法（明白了吗？！）。

Janina

# 2023年2月14日

嗨，我一直在尝试使它工作，但我的文字无法链接到路径。
您能告诉我我做错了什么吗？
我已经在这里插入了所有内容：https://atelier.wild-core.net/emerge/（页面中间）
路径出现了，文字也出现了……但它们没有链接。
非常感谢您的任何帮助。

来自法国的真诚问候。

hudecekdev

# 2024年8月12日

不错的文章。前段时间我制作了text-to-svg.com——一个将文本转换为SVG路径的工具，也许对某些人有用。

代码片段

我们是如何做到的

评论

发表评论 取消回复

发表评论取消回复