SVG饼图示例及经验小结
原创：Qr，2008/9/16 http://Qr.blogger.org.cn
经过短暂的学习，饼图的绘制终于取得了不错的成绩，贴几个示例和一些小经验作为这个阶段的小结。
平面饼图一般比较简单，以圆形为主，没什么新鲜的，值得一提的是，饼图绘制的起始问题，似乎从π/2起始效果比0起始更加美观，更加突出视觉效果，这也许正是常见饼图绘制大多从π/2起始的原因吧。实际上，π/2起始比0起始的饼图，在计算方面没有什么大的差别，纯粹在角度上加π/2或90℃即可。
至于3D饼图，个人以为0起始比π/2起始更好，原因3D饼图通常以两个椭圆饼图叠加，前者比后者少了一个椭圆叠加的痕迹，要想达到完美，须对这个痕迹进行重绘修饰，以达到掩饰的效果。感兴趣的朋友可以将源码中有4个path的g的第3个path注释掉看看效果，尽管可以通过第3个path来修饰，但须修饰的地方多了，效果多少有点打折，况且还增加了一些难度和页面数据传输量。
绘制3D饼图，还有一个突出的问题。SVG不支持CSS中的z-index，所以，各元素的显示就因为层的问题无法控制而导致图形显示错位，因为SVG各元素以添加次序为准，靠后的元素会覆盖靠前的元素。无论0起始或是π/2起始，都存在这个问题，1、4象限扇面叠加显示，如图片末尾两个饼图。解决的办法就是，判断哪个扇面始边处于第1象限、终边处于第4象限，将所处象限的扇面按倒序方式重排输出即可。
关于饼图的填充色，相邻的扇面最好用对比色，如果相邻的几个扇面色系相同颜色相近并由浅而深，则那几个扇面间就会形成比较强的立体感，视觉效果会差很多（本例代码中的填充色彩是程序随机生成，没有认真去调整，所以效果有点差）。
还有一个问题，就是分组问题，3D饼图每个扇面的所有元素分在一个组内，这样，无论是动画、渲染、色彩及脚本就可以非常方便的去实现了。
最后，关于 viewBox 缩放的问题，这个参数设置不好，就会导致比例失衡。如果浏览器分辨率为1027*768，可设viewBox="0 0 1024 600"，这样，在没有缩放的情况下，浏览器显示原图大小，其它分辨率可依此推定。（这个问题适用于所有SVG图形绘制。）
本文涉及3D饼图源码，没有进行渲染，如果通过滤镜进行渲染，3D效果更真实，只是本人初学，还没有涉及到滤镜，所以……
原创：Qr，2008/9/16 http://Qr.blogger.org.cn
源码下载：http://blogger.org.cn/blog/more.asp?name=Qr&id=39956
[返回] W3CHINA.ORG讨论区 - 语义网·描述逻辑·本体·RDF·OWL →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → [原创]SVG饼图示例及经验小结
(订阅本版)
2008/9/16 17:19:00
新浪微博
[原创]SVG饼图示例及经验小结
