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