接觸SVG

今天正式接觸svg，看了大半天，來聊聊svg是什麼個鳥東西。

因爲我在前端方面比較熟，那麼狠天然地想和個人舊情人canvas對比一下。svg好在哪兒？

svg看起來像是xml，矢量圖，可伸縮，隨意看果體
svg適合作一些複雜的靜態圖，因此適合當花瓶。
canvas太愛動了，停下來慘不忍睹。。實際上是相比之下canvas只能畫一些簡單的圖形。

說的可能不太合適，但至少我感受是這樣。

那如今掀開SVG新娘的頭蓋骨吧，錯了，是紅蓋頭。

畫矩形

<svg>
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

畫圓

<svg>
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

俺給了各位看了兩個例子，不知道各位觀衆老爺有沒有發現，svg的描述要比canvas輕鬆不少，畢竟不用看到js那個黃臉婆了。

svg中這些圖形的屬性能夠不用所有用屬性的方式寫出來，能夠用第一種相似css的方式去表達對她的愛。

<svg>
  <rect width="300" height="100"/>
</svg>

rect{
  fill:rgb(0,0,255);
  stroke-width:1;
  stroke:rgb(0,0,0)
}

雖然可能管家sublime大人不認識他們，但畢竟遊覽器關老爺知道就行。

對了，忘記說畫圓裏的cx和cy是什麼個東西，這兩個對圓來講只是一個座標，可是對矩形來講那是變身器~

<rect x="20" y="20" rx="20" ry="20" width="250" height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>

這樣咱們就畫了一個圓角矩形，rx表明了水平方向的弧度，ry是垂直方向的弧度。

既然可讓矩形變身，那咱們偉大的圓固然也能夠。不過此次圓大大喊他兄弟來了。

<ellipse cx="300" cy="150" rx="200" ry="80"style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>

參數相似圓角矩形。

而後咱們來畫線

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

這玩意兒只能畫一條線，太不實用了，差評退貨！
見見高級貨

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

http://jsbin.com/OLEhOMuP/1/edit
這什麼jb玩意兒，其實有點像漩渦一族的家徽。不過話說回來，path的參數就有點複雜了。
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

大寫是絕對定位，小寫的話是相對定位。你問我什麼意思？麻痹有沒有學過css！
咳咳
因此

<path d="M250 150 L150 350 L350 350 Z" />

就是開始於250,150的位置，路經150,350,到達350,350，而後閉合線路，就造成了一個三角形。

說道三角形，那怎麼畫三角形呢？

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

對，咱們祭出了多邊形，把點的座標寫一寫，就有多邊形出來了。

等等，你說canvas有濾鏡？are you kidding me?

svg有啊！
隨便來看一個高斯模糊

<defs>
  <filter id="Gaussian_Blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
  </filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>

svg有不少濾鏡
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
以上我均不知道什麼效果。

如今看看漸變是怎麼樣的。
其實和濾鏡差很少用法

<defs>
  <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
  <stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>

<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
  <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
  <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>

差點忘了怎麼在svg插入文字

<text xmlns="http://www.w3.org/2000/svg" x="30" y="100" style="font:36px verdana bold;fill:blue;">This is some text!</text>

其實寫到這裏，我一看時間已經2點了媽蛋，再寫點就去睡覺。明天又起不了牀了QAQ，sunny不要說我~~

聊聊svg的動畫，svg的動畫實現更簡單了

<rect x="20" y="20" width="250" height="250" style="fill:blue">
<animate attributeType="CSS" attributeName="opacity" 
from="1" to="0" dur="5s" repeatCount="indefinite" />

這樣就是一個淡出的矩形效果，意思你們能夠看屬性名稱看得出來吧，設置屬性類型，指定透明度，而後從1變成0，時間5秒，永遠重複。

全部svg的濾鏡和動畫都是疊加起來，好比

<rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime"> 
<animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0"/> 
<animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0"/> 
<animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800"/> 
<animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300"/> 
<animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze"/>
</rect>

這就是一個一點點變大的矩形，2秒後變色的例子。

svg大概就是這麼個樣子，其實還能夠深刻，而後淺出。爽~~

今天爲何會看這破玩意兒呢？
http://www.zhangxinxu.com/wordpress/?p=3910
中午看到這篇東西，而後晚上在就看鑫大大的文檔。順手提幾個pull request。

得出一個總結，
Snap.svg是個好妹紙。
具體看鑫大大的文檔
https://github.com/zhangxinxu/demo-Snap.svg