SVG入門

05-14

SVG已經出來好多年了，其實我也知道好久了~_~不過一直沒用過，平時一直都是切設計師給的效果圖寫頁面。

最近設計師做網頁改版，裡面有些類似小框框，小圖標等需要一些動畫效果，一開始我只是想純粹的用css3動畫做出來，但是感覺效果非常low，尤其是在做折線的過度時，丑哭我了。無奈只好搬出來想學習良久的SVG，小白進修中。。。

說到SVG，還是先啰嗦一下它的意思吧！

SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。就是大家所熟悉的可伸縮矢量圖形 (Scalable Vector Graphics)。

與其他圖像格式相比，使用 SVG 的優勢在於：

SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的解析度下被高質量地列印
SVG 可在圖像質量不下降的情況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製作地圖）
SVG 可以與 Java 技術一起運行
SVG 是開放的標準
SVG 文件是純粹的 XML

查看 SVG 文件

Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。

IE8和早期版本都需要一個插件 - 如Adobe SVG瀏覽器，這是免費提供的。

廢話不多說，直切主題！

1.關於svg的引入

我現在主要是針對的HTML頁面的使用，所以也就直接在HTML里直接引用了。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg1</title></head><body> <h1>My first SVG</h1>  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="#333" stroke-width_="2" fill="#ff0000" />   </svg></body></html>

注意：svg不能直接嵌入到Opera裡面。

2.開始繪製

知道了怎麼引入svg，下面就要開始繪製了。

舉個例子！

我要繪製一個矩形：

<!DOCTYPE html><html><body><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width_="300" height="100" stylex="fill:#ccc;stroke-width:2;stroke:#333" /></svg> </body></html>

顯示為：

但是，有點問題啊！不知道各位有沒有發現.

繪製的時候，我一開始就遇到了個問題，比如我畫矩形的時候，寬300，高100，邊框寬度2，但是在瀏覽器打開時，邊框顯示很不正常。心想可能是太細了吧，開始加粗，越粗越不像樣。。。。

原來。。。根據瀏覽器，svg會有自身默認的畫布（乾脆叫做畫布吧）大小，這個大小好像也不太固定。所以解決的辦法是給svg根元素里設置它的畫布大小，這個最好一開始就設置上，根據自己大小的需求設置。

如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width_=500 height=500 stylex="outline: 5px solid #ccc;"> <rect width_="300" height="100" stylex="fill:#ccc;stroke-width:2;stroke:#333" /></svg>

效果就是：

這樣邊框就顯示正常了，之後所繪製的圖形也會出現同樣的效果，希望大家小心哈！

好啦！入門就到這裡，其他圖形的小練習，比如圓形，直線，多邊形等，就參考一下http://www.runoob.com/svg/svg-rect.html，做繼續練習吧！

其中的fill-rule填充規則參考 http://blog.csdn.net/cuixiping/article/details/7848369;

3.svg路徑

關於繪製複雜曲線，可以使用svg的路徑path來繪製。例如：

<path d="M10 10L90 90" stroke="#000000" stylex="stroke-width: 5px;"></path>

其中 d 是屬性名；

路徑畫虛線的方法：

<path stroke-dasharray="5,5" d="M5,20l25,0" />

其中：第一個是每個虛線的長度，第二個是虛線之間的間隔。

path的幾種路徑：

其中：字母大寫表示的是絕對位置，小寫是相對位置。

例1：SC曲線

效果圖:

其中：綠色的線是使用S路徑時自動添加的與C路徑對稱的線。

例2：QT曲線

其中：綠線為使用T路徑時自動對稱的點。

小效果1：

 <defs> <path id="path1" d="M20,20 S100,150 200,10" /> </defs> <text x="10" y="100" stylex="fill:red;"> <textPath xlink:href="#path1">I love SVG I love SVG</textPath> </text>

效果2：

<text x="550" y="400" fill="red" font-size="30" >你好  <animateMotion path="M 0 0 L 100 -100 L100 -200" dur="5s" fill="freeze" /> </text>

另外~~~~

配合 walkway.js ，能讓動畫效果更加酷炫！！

祝你好運！