文档章节

学习 kity 笔记(三) 继续 SVG

刘军兴
 刘军兴
发布于 2015/11/13 11:20
字数 533
阅读 154
收藏 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.
  

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 54
博文 184
码字总数 226359
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu 安装ssh服务以及开启root用户ssh登录

一、安装ssh服务 安装ssh服务 sudo apt-get update sudo apt-get install openssh-server 安装完成后启动ssh服务 sudo service ssh start 二、开启root用户ssh登录 解决root远程ssh不能登录,...

15834278076
13分钟前
1
0
AndroidRX

1.延时并切换回主线程执行 Observable.just(true).delay(2, TimeUnit.SECONDS) .observeOn(AndroidSchedulers.mainThread()) .subscribe(new Consumer<Boolean>() { [@Override](https://my.......

我是菜鸟我骄傲
40分钟前
1
0
申请Let's Encrypt永久免费SSL证书

环境安装 1、安装git yum install git-core 2、安装python 系统自带 不用安装 只要版本大于2.7即可。 获取Let's Encrypt免费SSL证书 先停止nginx 在阿里云安全组里加入 443端口的入规则 git ...

HGMrWang
48分钟前
2
0
如何使用playframework进行更好的开发

1: 自定义基类Controller 相信刚开始使用Play的人写的Controller 都继承于 play.mvc.Controller , 但这并不是一个很好的选择,自建基类Controller可以扩展更多的功能。 1.1 验证功能。 后台...

tuerqidi
53分钟前
8
0
《JavaScript高级程序设计(第3版)》阅读笔记

第6章 面向对象的程序设计 6.2 创建对象 6.2.1 工厂模式 JavaScript创建对象(一)—— 工厂模式 6.2.2 构造函数模式 JavaScript创建对象(二)——构造函数模式 6.2.3 原型模式 JavaScript...

Bob2100
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部