Page 112 - css揭秘

width: 50%; height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}

试一试 play.csssecrets.io/pie-static

SVG 解决方案

SVG 的出现让很多图形的制作任务变得简单，饼图也不例外。不过，
我们这里并不打算用纯粹的矢量路径来绘制饼图，因为需要一些复杂的计
算。我们将换用一个更加巧妙的方法。
首先从一个圆形开始：

<svg width="100" height="100"> SVG
<circle r="30" cx="50" cy="50" />
</svg>
图 3-58
1①
然后，给它添加一些基本的样式 ： 我们的起点：一个绿色的 SVG 圆
形，有一道粗粗的 #655 描边
circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 30;
}

你可以在图 3-58 看到这个加了描边的圆形。SVG 的描边效果并不仅仅
由 stroke 和 stroke-width 组成。还有很多不那么为人所知的属性可以微
调描边的效果，其中之一就是 stroke-dasharray，它是为虚线描边而准备
的。举个例子，我们可以这样使用它：

stroke-dasharray: 20 10;

这行代码表示我们想让虚线的线段长度为 20 且间隙长度为 10，如图
3-59 所示。看到这里，你可能开始纳闷了，这些关于 SVG 描边的基础知识
到底跟我们想要的饼图有什么关系？当我们把这个虚线描边的线段长度指
定为 0，并且把虚线间隙的长度设置为等于或大于整个圆周的长度时，答案
就会浮出水面了。（这里做个简单的计算，圆形的周长 C = 2πr，因此在这里 图 3-59
C=2π × 30 ≈ 189。） 通过 stroke-dasharray 可以生
成一道简单的虚线描边
① 你可能已经了解，这些 CSS 属性同样也可以作为标签属性添加到 SVG 元素上。在对代码的
可移植性要求较高的场合，这个特性会很方便。

14 简单的饼图 81

඀ࠡ JOEC