文档章节

学习 kity 笔记(三) 继续 SVG

刘军兴
 刘军兴
发布于 2015/11/13 11:20
字数 533
阅读 172
收藏 0

接着上篇, 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.
  

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 56
博文 189
码字总数 231687
作品 0
昌平
私信 提问
学习 kityminder 笔记(十)

今天学习 layout 下的各个 js. 在此之前, 需要回顾一下 core/layout. 注意在 core 下面有 layout.js, module 下面也有 layout.js, 我是被混淆了, 不能换个名字么? === 布局基类 Layout 位于 ...

刘军兴
2015/11/25
56
0
学习 Kity 笔记(一) Class 支持

(此文已经过时, 会重新回顾学习并写新文, 2015-12-03 注释) Kity 是百度前端小组开发的 SVG 矢量图形库. 下载了 kity, 以及 grunt, seajs, 尝试用 grunt 构建发生错误: Fatal error: Module...

刘军兴
2015/11/12
0
0
学习 kity 笔记(四) Paper 和 Shape

今天继续学习 kity. 根据前面了解的 svg, kity.Paper 大致应对应 svg 画布, 各种 Shape 大致对应 svg 图形元素. 因此需要查看 kity.Paper 类, 以及各个 kity.Shape 类, 了解它们如何封装, 以...

刘军兴
2015/11/16
0
0
学习 svg 笔记(一) SVG 动画

在前一篇学习 kityminder 中我们遇到到了动画, 为此先补充学习 svg 动画的知识, 以及相关的 kity 如何封装动画 到 kity.Animator 中的问题. 购买的图书 《SVG精髓》有一个良好的示例网站, 位...

刘军兴
2015/11/30
69
0
学习 kityminder 笔记(十一)

上次看到了 Layout 类及其实做子类 MindLayout 等, 本次研究驱动它们的部分: Minder.layout() 函数. 回顾 core/layout.js 里面相关代码(按照调用顺序): extend class Minder {// 用于在 Mind...

刘军兴
2015/11/30
78
0

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-5(常见的依赖注入)

依赖注入(dependency injection) 之前提到控制反转(Inversion of Control)也叫依赖注入,它们其实是一个东西,只是看的角度不同,这章详细说一下依赖注入。 依赖——指bean对象创建依赖于...

白话
12分钟前
1
0
《读书是教师最好的修行》读后感优秀范文2200字

《读书是教师最好的修行》读后感优秀范文2200字: 作者:吴淑英;《读书是教师最好的修行》一书,收录了作者对50本经典书籍阅读后阐发的感受。作者10年来坚持每周阅读一本书,并写一篇读后感...

原创小博客
14分钟前
0
0
红外接收器驱动开发

背景:使用系统的红外遥控软件没有反应,然后以为自己接线错误,反复测试,结果烧坏了一个红外接收器,信号主板没有问题。所以自己开发了一个红外接收器的python驱动。接线参见https://my.os...

mbzhong
今天
2
0
ActiveMQ消息传送机制以及ACK机制详解

AcitveMQ是作为一种消息存储和分发组件,涉及到client与broker端数据交互的方方面面,它不仅要担保消息的存储安全性,还要提供额外的手段来确保消息的分发是可靠的。 一. ActiveMQ消息传送机...

watermelon11
今天
1
0
HashTable和Vector为什么逐渐被废弃

HashTable,不允许键值为null,还一个就是put方法使用sychronized方法进行线程同步,单线程无需同步,多线程可用concurren包的类型。 如编程思想里面说的作为工具类,封闭性做的不好没有一个...

noob_chr
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部