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擴展來創建基於輸入數據的餅圖，保存由此生成的圖像，並可選擇生成圖像映射，以便可以突出顯示圖表的各個部分，提供工具提示等。