Page 114 - css揭秘

100% 的动画变得更加简单。我们只需要新建一个 CSS 动画，并把 stroke-
dasharray 属性从 0 158 变化到 158 158 就可以了：

@keyframes fillup {
to { stroke-dasharray: 158 158; }
}

circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 50;
stroke-dasharray: 0 158;
animation: fillup 5s linear infinite;
}

接下来继续优化，我们可以给这个圆形指定一个特定的半径，从而让
它的周长无限接近 100，这样就可以直接把比率的百分比值指定为 stroke-
dasharray 的长度，不需要做任何计算了。因为周长是 2πr，半径就是
100 ≈ . 15.915 494 309
15.915494 309
2π ，我们最终把这个值取整为 16。我们还可以在 SVG 的
viewBox 属性中指定其尺寸，而不再使用 width 和 height 属性，这样就可
以让它自动适应容器的大小了。

在完成这些改进之后，我们再来试试生成图 3-62 中的饼图。结构代码
将是这样的：

<svg viewBox="0 0 32 32"> SVG
<circle r="16" cx="16" cy="16" />
</svg>

而 CSS 代码会变成这样：

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

circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 32;
stroke-dasharray: 38 100; /* 可得到比率为38%的扇区 */
}

来感受一下，现在改变饼图比率是多么轻松自然啊。不过，在经过了
这些简化之后，我们还是不希望每画一个饼图都要重复编写一次 SVG 标签。
这个时候就轮到 JavaScript 大显身手了，它能把这个过程自动化。我们需要
写一小段脚本来处理类似下面这段简单的 HTML 结构：

14 简单的饼图 83

඀ࠡ JOEC