Page 113 - css揭秘

stroke-dasharray: 0 189;

图 3-60
不同的 stroke-dasharray 值
及其效果；从左到右分别是：0
189、40 189、95 189 和 150 189

其结果就是图 3-60 中的第一个图形。我们可以看到，它完全去除了描
边效果，只剩下绿色的圆形。不过，当我们开始增加第一个值时，好玩的事
情就开始了（参见图 3-60）：因为虚线的间隙太大，我们根本就看不到连续
的虚线效果，只能得到虚线的第一段线段，而它在整个圆周上覆盖的长度正
是我们给它指定的长度值。
你可能已经开始思考下一步该怎么办了：如果我们把这个圆形的半径减
小到一定程度，它就会被描边完全覆盖，而我们最终会得到一个非常接近饼
图 3-61 图的图形。举例来说，当我们把圆形的半径设为 25 并且把 stroke-width
①
我们的 SVG 图形 终于开始接近 指定为 50 时，所需要的代码如下所示（你可以在图 3-61 看到这段代码的效
饼图的样子了
果）： 1

<svg width="100" height="100"> SVG
<circle r="25" cx="50" cy="50" />
</svg>

circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 50;
stroke-dasharray: 60 158; /* 2π × 25 ≈ 158 */
}

现在，把它转换成前一种方案所呈现的那种饼图就非常简单了：我们
只需要在描边的下层再绘制一个稍大些的圆形，然后把描边以逆时针方向
旋转 90°，以便让扇区的起点出现在最顶部。由于 <svg> 元素本身也是一个
HTML 元素，我们可以给它设置样式：

svg {
transform: rotate(-90deg);
background: yellowgreen;
border-radius: 50%;
}

你可以在图 3-62 中看到最终效果。这个技巧还可以让饼图从 0 到

图 3-62 ① 请记住：SVG 在绘制描边时总是会把一半绘制在元素外部，另一半绘制在元素内部。在未来，
最终的 SVG 饼图 我们将有能力控制这种行为。

82 第 3 章 形状

඀ࠡ JOEC