學習 kity 筆記(三) 繼續 SVG

接着上篇, SVG 元素就這些? (rect,circle ..., path) 仍是w3c課程太簡單...? 仍是要買書?

w3cschool 下一篇就直接學 svg 濾鏡了.

可用的濾鏡有 feBlend, feXXX (大約20個), (fe 是什麼的縮寫?)
(重點)註釋: 每一個(each) SVG 元素(rect etc) 上使用多個(multi)濾鏡.

(教程就這兩句...)

== SVG 高斯模糊(Gaussian Blur) ==

<defs> 用於定義特殊元素如濾鏡(當容器用).
<filter> 用於定義 SVG 濾鏡, 給出惟一 id 以別處可引用.
<feXXX> 給出濾鏡效果. 每種濾鏡估計有不一樣屬性等, 查手冊...

估計 kity 的 filter 部分就是對 svg 的濾鏡功能進行了包裝,加強?

 

== SVG 線性漸變 ==

漸變要在 <defs> 中定義. 漸變指一種顏色到另外一種顏色的平滑過渡.
兩種漸變類型: 線性漸變, 放射性漸變(彷佛各類 canvas 庫也都支持這些...)

<linearGradient> 定義線性漸變. 可規定 x1,x2,y1,y2 (開始,結束位置).
顏色範圍可兩到多個. (弄了4個顏色 stop 試了一下, 果真能變~)

<radialGradient> 放射性漸變. 相似先略.
有一些示例, 濾鏡能產生各類奇異的效果, 包括對文本的變化.

能夠給rect(或其它元素?) 包以 <a> 元素, 點擊後連接到別處.

能夠爲元素添加 onclick 事件 (或其它事件). 看了一下 __prototype__, 裏面各類 DOM 的
   onXXX 事件幾乎都有, 意味着能夠編程交互這些 svg 元素(瀏覽器支持?).

也有 <animate> 的演示, 但沒有課程......
    http://www.w3school.com.cn/svg/animate_1.svg

這裏使用 animate 元素描述要進行的動畫, 應好好理解下.

也有用 <g transform=""> 對文本進行變形(變幻)的例子, 一樣沒有課程...
     http://www.w3school.com.cn/svg/animatemotion_1.svg

經過上述對象,濾鏡,動畫,腳本的組合, 應能作出具備特點效果的網頁應用.

W3CSchool 上面關於 SVG 的教程就不多一點, 沒有深刻的. 因此可能還得看書,
   或者啃 W3G 網站上英文原標準. 

或者繼續先學 kity.