Page 116 - css揭秘

这样就可以了！你可能会琢磨前面的 CSS 方案是不是更好一些，因为
它的代码看起来更简单，而且你也更熟悉。但实际上 SVG 的方案具有不少
优点，而这恰恰是纯 CSS 方案存在不足的地方。
„ 增加第三种颜色是非常容易的：只要增加另一个圆形，并设置虚线
描边，再用 stroke-dashoffset 来推后描边线段的起始位置即可。
把它的描边长度添加到它下面那层描边的长度，也可以做到。在前
一种方案中，我们该怎么给饼图增加第三种颜色呢？
„ 我们不需要特别担心打印，因为 SVG 元素本身被视为页面内容，是
会被打印出来的，在这方面它跟 <img> 元素类似。前面的方案则依
赖背景来实现，因此往往是打印不出来的。
„ 我们可以用内联样式来指定颜色，这意味着可以很容易地通过脚本
来控制颜色（比如，我们想让用户输入来决定颜色）。前一种方案则
依赖伪元素，我们无法对它使用内联样式；即使可以通过继承来变
通实现，也往往很不方便。

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

„ CSS 变形
http://w3.org/TR/css-transforms 相关规范
„ CSS 图像
http://w3.org/TR/css-images

„ CSS 背景与边框
http://w3.org/TR/css-backgrounds
„ 可缩放矢量图形（SVG）
http://w3.org/TR/SVG

„ CSS 图像（第四版）
http://w3.org/TR/css4-images

14 简单的饼图 85

඀ࠡ JOEC