css3形状兼容性

Question

我正在尝试制作一个轮子，它将被切成不同颜色的部分(有点像一个饼图)，但它们可能在上面有额外的元素，例如，在边上有一个缝合的边界，每个边上都有一个图标，等等。

所以我的问题是，我是不是只使用css3 (例如：http://www.css3shapes.com/)，然后在Internet explorer 6-9中使用像http://css3pie.com/这样的东西？

或者我只是在Photoshop中做这件事，然后把它作为背景图像放在div上更好？并对额外的元素使用绝对定位？

哪一项是最佳实践？

Answer 1

我真的不会使用CSS来绘制形状。它充其量也就是很麻烦，而且可能会变得非常混乱。你链接到的cssshapes站点上的很多例子在Firefox3.6中都不能工作--Firefox3.6的使用率仍然很高--更不用说其他更老的浏览器了，在IE中你会遇到很大的困难；css3pie不会给你提供饼图所需要的那种细粒度的控制。

如果你想在浏览器上使用客户端绘制东西，有许多方法可以做到这一点，而不是求助于像CSS形状这样的技巧。

SVG和Canvas都是在浏览器上放置和操作图形的相对较新的技术。SVG绘制矢量图形，而Canvas用于基于像素的图形。

它们在各种浏览器上都得到了支持。一个明显的例外是IE8和更早的版本。但是，IE确实支持另一种称为VML的图形格式，并且IE有一些javascript工具可以将SVG和Canvas转换为VML，因此您可以使用它们中的任何一个，它们将使用这些工具在IE中工作，这使得SVG和Canvas有效地跨浏览器兼容。

但是，如果您正在绘制饼图或类似的东西，我个人建议使用Raphael库。这是一个javascript库，可以在所有浏览器中工作，可以用来绘制和动画几乎任何东西，包括图形和图表(它甚至有一个separate graphing add-on library。看看这两个站点上的演示，看看它能做些什么；我想您会印象深刻的。(我当然是)

希望这能有所帮助。

Answer 2

我将(并且确实)使用PHP的GD扩展根据输入数据创建一个饼图，保存由它生成的图像，并可选地生成一个图像地图，以便图表的某些部分可以突出显示，具有工具提示等。