用CSS和SVG制作饼图_html/css_WEB-ITnose

原文出处： lulux的博客 欢迎分享原创到伯乐头条

在涉及到CSS技术时，没有人会比Lea Verou更执着、但是又足够聪明，努力去找寻问题的各种解决方案。最近，Lea自己撰写、设计和出版了一本书??CSS Secrets，这本书非常有趣，包括一些CSS小技巧以及解决常见问题的技术。如果你觉得自己的CSS技术还不错，看看这本书，你会吃惊的。在这篇文章中，我们发布了书里的一些片段，这也被发表在Lea最近在SmashingConf New York的演讲内容中??用CSS设计简单的饼图。注意，因为浏览器的支持有限，有些demo可能不能正常运行。??编辑

饼图 ，即使是最简单的只有两种颜色的形式，用Web技术创建也并不简单，尽管都是一些常见的信息内容，从简单的统计到进度条指标还有计时器。通常是使用外部图像编辑器来分别为多个值创建多个图像来实现，或是使用大型的JavaScript框架来设计更复杂的图表。

尽管这个东西并不像它曾经看起来那么难以实现，但是也没有什么直接并且简单的方法。但是，现在已经有很多更好、更易于维护的方式来实现它。

基于变换的解决方案

这个方案从HTML的角度来说是最好的：它只需要一个元素，其它的都可以用伪元素、变换和CSS渐变完成。我们从下面这个简单的元素开始：

1

查看更多关于用CSS和SVG制作饼图_html/css_WEB-ITnose的详细内容...