css3形状兼容性

Question

我试图制作一个轮子，它将被切成不同颜色的部分（有点像饼图），但它们可能在顶部有额外的元素，例如，跨越边界的缝合边框侧面并在每个边缘的图标等

所以我的问题是我只是用CSS3（例如：http://www.css3shapes.com/） ，然后使用类似http://css3pie.com/的Internet Explorer 6-9？

或者我只是最好在Photoshop中做它，并把它作为背景图像拍在一个div上？并使用绝对定位额外的元素？

哪个是最佳做法？

Answer 1

我真的不会使用CSS绘制形状。它充其量也是可笑的，而且会变得非常混乱。在链接到的cssshapes站点中的很多示例甚至不能在Firefox 3.6中使用 - 这仍然是相当常用的 - 更不用说其他旧版本的浏览器了，而在IE中，您真的很挣扎; css3pie不会为您提供饼图所需的细粒度控制。

如果你想在客户端使用浏览器来绘制东西，有很多方法可以做到这一点，而不需要像CSS形状那样的黑客。

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

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

但是，如果你正在绘制饼图或类似的东西，我个人的建议是使用Raphael库。这是一个JavaScript库，可在所有浏览器中使用，可用于绘制和制作任何图形和图表（包括图表和图表）（甚至包含separate graphing add-on library）。请参阅这两个网站上的演示以了解其功能;我认为你会留下深刻的印象。（我当然是）

希望有所帮助。

Answer 2

我会（并且确实）使用PHP的GD扩展来创建基于输入数据的饼图，保存由此生成的图像，并可选择生成图像映射，以便可以突出显示图表的各个部分，提供工具提示等。