Page 171 - css揭秘

请 注 意 我 们 是 用 viewBox 来 定 义 它 的 单 位 的， 而 不 是 用 width 和
height 属性。这允许我们不需要指定一个固定的尺寸就可以设置坐标系统
和图形的宽高比。这个写法不仅更加紧凑，还可以节省几行 CSS 代码，因
为我们已经不需要对这个 <svg> 元素应用值为 100% 的宽度和高度了：它自
己就可以自动地适应外层容器的尺寸。

如果你没看懂路径的语法，也别怀疑自己的智商，因为根本没人能看
懂。即使真的有人费尽心思领略到了 SVG 路径语法的一丝神秘魅力，也会
①
在几分钟内忘得一干二净 。如果你还是很好奇，那我就来讲解一下这串神
1
秘代码所包含的三个指令。
„ M 0,50：移动到点 (0,50)。
„ a 50,50 0 1,1 0,1：以当前所在的这个点为起点，以当前点右侧 0
单位、下方 1 单位的那个点为终点，画一段圆弧。这段圆弧的水平
半径和垂直半径都必须是 50。如果存在两种可能的圆弧度数，选择
度数较大的那一种；同时，如果存在两种可能的圆弧方向，选择画
在这两个点右侧的那一种，而不是左侧的。
„ z：用一条直线线段闭合这条路径。
到目前为止，我们的路径还只是一个黑色的圆（参见图 5-43）。我们通
过 <text> 和 <textPath> 元素来添加文本，并通过 xlink:href 属性来把它
链接到这个圆上：

<div class="circular"> SVG
<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">
circular reasoning works because
</textPath></text>
图 5-43 </svg>
我们的路径现在是一个圆，并默 </div>
认填上了黑色
在图 5-44 中可以看到，尽管在视觉效果和文本可读性方面还有很多工
作要做，但我们已经达成了某些有史以来 CSS 完全无法企及的效果！

接下来的一步，就是把黑色的填充效果从路径中去掉。在任何情况下
我们都不希望这个圆形路径被人看到；我们只希望它发挥一个基准线的作
用，来引导这段文本。有很多方法可以做到这一点，比如把它嵌套进一个
<defs> 元素中（该元素就是专门为这个目的而设计的）。不过，这里我们希
望尽可能减少实现这个效果所需的 SVG 代码量，因此我们将用 CSS 来给它
应用一个 fill: none 样式：

图 5-44
尽管还有很多事情要做，但我们
已经达成了某些 CSS 完全无法做 ① 为什么 SVG 路径的语法如此晦涩？追溯到它的诞生之初，大家都坚信没有人会手工编写
到的效果 SVG 文件，于是 SVG 工作组为了减小文件体积，就直奔最紧凑的语法去了。

140 第 5 章 字体排印

඀ࠡ JOEC