Page 170 - css揭秘
P. 170
解决方案
有一些脚本可以实现这个效果。这些脚本需要把每个字母包裹在独立的
<span> 元素之中，然后把各个字母分别旋转，从而构成一个环形。这种方
式不仅有很浓的 hack 味道，而且还在没有正当理由的情况下给页面增加了
臃肿的脚本和冗余的 DOM 元素。
图 5-41
在 juliancheal.co.uk 网站的左侧，
①
那些“钮扣” 就运用了环形文
字的效果。请注意，环形文字是
唯一不会打破这里“钮扣”双关
语的设计手法，因为钮扣图形的
中心已经被孔和线所占据了
尽管目前还没有更好的纯 CSS 实现方法，但我们其实可以借助一点内
联 SVG 来轻松解决这个难题。SVG 原生支持以任意路径排队的文字，而圆
1
形只不过是一种特定的路径而已。让我们开始动手吧！
在 SVG 中，让文本按照路径排列的基本方法就是用一个 <textPath>
元 素 来 包 裹 住 这 段 文 本， 再 把 它 们 装 进 一 个 <text> 元 素 中。 这 个
<textPath> 元素还需要在它的 ID 属性中引用一个 <path> 元素，然后就可
②
以用这个 <path> 元素来定义我们想要的路径 。在内联 SVG 内部的文本同
样可以继承绝大多数字体样式（不包括 line-height，因为它会由 SVG 另
行指定），因此我们完全不需要担心字体问题，就像处理外部的 SVG 图像时
2
一样。
假设我们想把“circular reasoning works because”这句话设定为环形文
字，让它铺满整个圆周，如图 5-42 所示。首先需要在 HTML 元素中添加一
个内联的 SVG，并用一个路径来定义我们想要的圆形：
SVG
<div class="circular">
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1,1 0,1 z"
id="circle" />
</svg>
</div>
① 在英语中，“钮扣”和“按钮”是同一个词（button）。——译者注 图 5-42
② 不幸的是，<textPath> 只能和 <path> 元素配合使用，这也是为什么我们没有采用可读性更
我们想要达成的最终目标
好的 <circle> 元素来生成圆形。
28 环形文字 139
ࠡ JOEC
