用 SVG 和 CSS 動畫製作的訊息圖表

DEMO：http://srpro.org/htmldemo/svg/ (請使用新版Chrome或Firefox開啟瀏覽效果，別用IE開啟，)  

範例下載： InteractiveSVG.zip (115.59 KB, 下載次數: 29)

2013-5-16 17:31 上傳

點擊文件名下載附件

  

---

什麼SVG ?
SVG是Scapable Vector Graphics 一種向量圖像格式(縮放不失真)，是W3C推薦的一種標準格式，符合XML節點的規則，用XML來描述二維圖像的語言。

這個範例今天筆者看到時，心中突然深深一股感慨，因為現在瀏覽器的世界大戰還是依然在持續膠著中，為了處理所謂的相容性，你必須要針對各家瀏覽器撰寫相容語法，例如：一句延遲語法，為了相容性必須要撰寫整整５條CSS (見下方範例)：

1. 
   
2. -webkit-animation-delay: 2.5s;
   
3. -moz-animation-delay: 2.5s;
   
4. -ms-animation-delay: 2.5s;
   
5. -o-animation-delay: 2.5s;
   
6. animation-delay: 2.5s;
   

複製代碼

因此，要普遍應用這種CSS3酷炫的動畫效果，現階段還是不太建議 , 其實講明白了最大問題還是出在IE , 例如這個案例在IE上就無法顯示效果 (包含SR數位工作室Banner 的動畫效果也是 ) , 有興趣的朋友可以直接看看IE9 這個網路發展害蟲的詳細介紹 。(IE9以下瀏覽器請直接無視)