学习 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.