企业官网建设流程全解析

• 前端
• 文档
• 教程

环形文字（Circular Text）是一种让文字沿圆形路径环绕排版的视觉技巧，常用于 Logo、徽章、印章、环形菜单等设计场景。本篇指南以 You-need-to-know-css 仓库中的 zh-cn/circular-text.md 文档为骨架，完整解析其「SVG 路径 + textPath 排版 + CSS 动画悬停旋转」的实现方案。读完本文，你将掌握用一行 arc 命令绘制圆形路径、用<textPath>让文字贴附圆周，以及用animation-play-state打造悬停启停的交互效果，并了解该技巧在当前仓库中的落地方式与浏览器兼容性。

效果一览与核心思路

该文档演示的效果非常直观：

• 一段重复的 "You-need-to-know-css-tricks-…" 文字沿圆形路径环绕排列，形成闭合的环形文字；
• 环形文字默认静止（动画状态为paused）；
• 鼠标悬停在 SVG 上时，动画切换为running，整个文字环开始匀速旋转，移开后停止。

实现这一效果只依赖两个层面的技术：

1. SVG 排版：用<path>绘制一个圆形路径，再通过<textPath>将文字绑定到该路径上，文字便会自动沿路径曲线排列；
2. CSS 动画：给<svg>元素施加transform: rotate()的@keyframes动画，并用animation-play-state控制悬停时是否播放。

文档开头给出的背景知识也印证了这一点：核心涉及 SVG 与 transition 两方面的知识储备。

完整示例代码（仓库原样）

以下是 zh-cn/circular-text.md 中提供的完整可运行示例。仓库使用 vuep（Vue Playground）渲染这类示例，代码以text/x-template脚本模板的形式存放，读者可以在文档页面中直接运行和修改：

<style> main { width: 289px; height: 289px; margin: 80px auto; font-size: 12px; } main svg { overflow: visible; animation: circular-text-rotate 5s linear paused infinite; } main svg:hover { animation-play-state: running; } main path { fill: none; } main text { fill: #b4a078; } @keyframes circular-text-rotate { to { transform: rotate(1turn); } } </style> <template> <main> <svg viewBox="0 0 100 100"> <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" /> <text> <textPath xlink:href="#circle"> You-need-to-know-css-tricks-You-need-to-know-css-tricks-You- </textPath> </text> </svg> </main> </template>

这段代码虽然只有几十行，却同时覆盖了「画圆路径」「沿路径排版」「旋转动画」「悬停交互」四个关键环节。下面逐一拆解。

核心原理一：一行 arc 命令画出圆形路径

环形文字的第一步，是准备一条让文字依附的路径。示例中只用了一行路径数据：

M 0,50 a 50,50 0 1,1 0,1 z

结合viewBox="0 0 100 100"（即 100×100 的用户坐标系），这条命令可以逐段解读：

为什么起点(0,50)与终点(0,51)几乎重合却能画出"整圆"？这是 SVG 画圆的经典技巧：两个端点距离极小（仅 1 个用户单位），远小于半径 50，此时large-arc-flag = 1会强制选取那条"大弧"——也就是圆心在(50,50)、覆盖约 358.85° 的优弧；而sweep-flag = 1决定了扫过的方向。最后z闭合路径，恰好用一条极短的直线补上那一小段缺口，于是路径在视觉上就是一个完整的圆。

值得强调的是，这里选择路径而非直接使用<circle>元素，正是因为<textPath>只能引用<path>（或<circle>、<ellipse>等可解析出路径的图形）的id。仓库中另一篇姊妹文档 zh-cn/ellipse.md 也从另一个角度展示了如何在纯 CSS 中用border-radius组合出圆与椭圆，两种"画圆"思路可以对照阅读。

核心原理二：textPath 让文字沿路径流动

路径画好后，文字的排版由<text>+<textPath>完成：

<text> <textPath xlink:href="#circle"> You-need-to-know-css-tricks-You-need-to-know-css-tricks-You- </textPath> </text>

关键点在于：

• <textPath xlink:href="#circle">通过xlink:href引用上面<path>元素的id="circle"，文字内容会按书写顺序依次"吸附"到路径上，沿曲线逐字排列；
• 文字串被刻意重复书写（"You-need-to-know-css-tricks-" 循环三遍），目的就是填满整个圆周；若文字过短，圆环就会出现明显的空白段；
• 示例中文字字号为 12px（main的font-size），颜色通过main text { fill: #b4a078; }指定——#b4a078是当前项目贯穿全站的主色调（在 assets/index.css 的 Gitalk 评论区样式等大量位置复用）；
• 由于 SVG 中文字默认有填充色而路径默认有描边色，示例特意用main path { fill: none; }隐藏路径本身的填充，让视觉上只剩干净的环形文字，而不是"文字套圆环"。

另外，main svg { overflow: visible; }很关键：SVG 默认会裁剪超出viewBox范围的绘制内容，环形文字恰好贴满 100×100 视口的边缘，若不放开overflow，文字在旋转过程中可能被裁掉一截。

核心原理三：CSS 动画与悬停启停

环形文字的"转动"完全由 CSS 动画驱动，与 SVG 本身解耦：

main svg { animation: circular-text-rotate 5s linear paused infinite; } main svg:hover { animation-play-state: running; } @keyframes circular-text-rotate { to { transform: rotate(1turn); } }

• circular-text-rotate：动画名称，与@keyframes对应；
• 5s：单次旋转耗时 5 秒；
• linear：匀速旋转（无加速/减速），适合这种"转圈"场景；
• paused：animation-play-state的初始值为暂停，页面加载后文字保持静止，避免动画一直抢注意力；
• infinite：循环播放，旋转永不停止（在播放状态下）；
• @keyframes只声明了to { transform: rotate(1turn); }，未声明from，因此起点取元素当前状态（0°），终点旋转一整圈1turn（等价于 360°）；
• 悬停时通过animation-play-state: running覆盖暂停状态，动画开始播放；移出后状态回到paused，动画定格。这里用到了文档背景知识中提到的 transition/CSS 动画体系。

仓库为这段动画在样式层还保留了一份独立声明：全局样式文件 assets/index.css 中定义了同名关键帧：

@keyframes circular-text-rotate { to { transform: rotate(1turn); } }

这与文档示例中的关键帧完全一致，说明该技巧在项目中被沉淀为可复用的动画定义。

参数速查表

基于上面的代码，各参数的含义与调整方向汇总如下：

仓库中的落地实现与运行方式

环形文字是 You-need-to-know-css 项目中"视觉效果"章节的一员（见 zh-cn/_sidebar.md，位于"文本截断"与"插入换行"之间）。仓库同时维护了中英文两个版本：zh-cn/circular-text.md 与根目录的 circular-text.md，两版内容一致，仅语言与模板id不同。

整个文档站点基于 docsify 构建（配置见 libs/index.js），index.html引入了libs/vuep.min.js与libs/vue.min.js，用于把文档中<vuep template="#circular-text"></vuep>标记对应的text/x-template脚本实时渲染为可交互 demo。如果你想在本地查看和调试这段环形文字代码，可以按 zh-cn/README.md 的快速开始操作：

npm install docsify-cli -g # 全局安装 docsify-cli（或用 yarn global add） docsify serve # 在当前目录启动文档服务

然后浏览器打开http://localhost:3000，进入"视觉效果 → 环形文字"页面即可看到并直接编辑运行该示例。

浏览器支持

原文档在"浏览器支持"一节嵌入了 Can I Use 组件（feat=css-transitions），用于查询 CSS 过渡/动画类特性的兼容性。从技术构成看，本技巧涉及的三项能力——SVG<textPath>（自 SVG 1.1 起即为标准特性）、transform: rotate()与animation-play-state——均是年代久远、被各主流浏览器广泛支持的基础能力。唯一需要注意的细节是xlink:href属于 XLink 命名空间写法，在非常古老的浏览器中可能需要href作为回退；现代浏览器普遍两者皆可。建议在正式上线前，仍以 Can I Use 等兼容性查询工具针对目标浏览器环境做一次确认。

延伸：从环形文字到沿轨迹动画

环形文字本身是静态排版技巧，而 You-need-to-know-css 仓库中的姊妹篇 zh-cn/circular-smooth.md（"延轨迹平滑效果"）展示了它的动态延伸：多个头像沿圆形轨迹匀速环绕旋转，核心手法是在@keyframes里组合rotate(...) translateY(-124px) rotate(...)，利用"先旋转定位、再反向补偿旋转"的方式让元素始终面向圆心（或保持自身姿态）。若你把本篇的环形文字看作"文字沿轨迹排版"，把 circular-smooth 看作"元素沿轨迹运动"，两者结合就能设计出诸如旋转徽章、环形跑马灯、绕圈导航等更复杂的交互动效。

小结

环形文字的实现路径可以浓缩为一句话：用 SVG 的 arc 命令画一条圆路径，用<textPath>把文字"粘"上去，再用 CSS 动画与animation-play-state控制它转不转。本文从 zh-cn/circular-text.md 的完整示例出发，拆解了路径命令的每个参数、textPath的绑定机制、悬停动画的启停逻辑，并结合仓库源码（assets/index.css 中的关键帧定义、index.html 的 vuep 渲染链路）做了印证。掌握这套组合拳后，你可以轻松把它迁移到 Logo 动效、加载指示器、节日祝福旋转文字等真实项目中。

• 前端
• 文档
• 教程