svg 背景
SVG是Scalable Vector Graphics的缩写，意为可缩放矢量图形。1998年，万维网联盟成立了一个工作组，研发一种通过XML来表现矢量图形的技术——SVG！由于SVG也是一种XML文件，所以SVG也继承了XML的开放性、可移植性和交互性的优点。如今几乎所有主流的浏览器都支持SVG，大家可以从 这里 得到更多的兼容信息，其中包括：
使用或者
* SVG
* 基本内容
* SVG并不属于HTML5专有内容
* HTML5提供有关SVG原生的内容
* 在HTML5出现之前,就有SVG内容
* SVG,简单来说就是矢量图
* SVG文件的扩展名为”.svg”
* SVG使用的是XML语法
* 概念
* SVG是一种使用XML技术描述二维图形的语言
* SVG的特点
* SVG绘制图形可以被搜索引擎抓取
* SVG在图片质量不下降的情况下,被放大
* SVG与Canvas的区别
* SVG
* 不依赖分辨率
* 支持事件绑定
* 大型渲染区域的程序(例如百度地图)
* 不能用来实现网页游戏
* Canvas
* 依赖分辨率
* 不支持事件绑定
* 最合适网页游戏
* 保存为”.jpg”格式的图片
* 用途
* 网页中一些小的图标
* 网页中动态特效(动画效果)
* HTML5中使用SVG
* 使用元素
* 作用 – 类似于元素
* 默认大小为300px*150px
* 使用CSS样式
* 使用SVG绘制图形,必须定义元素中
* 绘制图形
* 矩形元素
复制代码代码如下:
<!–
在HTML页面中使用svg标签的话
* 定义元素
* 类似于元素的作用
* 默认大小 300px * 150px
* 设置宽度和高度 – 属性和style
* 利用svg绘制所有图形,必须定义在元素内
* 利用svg绘制的图形是与HTML页面有关的
–>
<!–
绘制矩形 –
* x和y – 绘制矩形的左上角坐标值
* width和height – 绘制矩形的宽度和高度
* 必须使用属性方式,不能使用style样式方式
* 默认颜色为黑色
设置颜色 – 既可以使用属性,还可以使用样式
* fill – 设置填充颜色
* stroke – 设置描边颜色
设置线条宽度
* stroke-width
注意
* svg绘制的图形,使用style方式设置样式,使用的不是CSS属性,而是SVG属性
–>
* 圆形元素
<!–
绘制圆形 –
* cx和cy – 圆形的圆形坐标值
* r – 圆形的半径
–>
* 椭圆元素
* 直线元素
<!–
元素中只能包含一个图形元素,还是可以包含多个图形元素?
* 可以包含多个图形元素
–>
* 折线元素
<!–
元素 – 折线
* points – 设置起点、折点及终点
* x和y之间使用”,”分隔
* 多个点之间使用空格分隔
折线的特点
* 默认将折线中的区域(起点到终点),默认提供黑色
–>
* 多边形元素
* 特效元素
* 渐变 – 渐变元素定义在元素内
* 线型渐变 –
* 该元素是起始元素
<!–
设置线型渐变 –
* 用法 – 将渐变定义在元素中
* 特点 – 具有基准线
* 起点坐标值 – x1和y1
* 终点坐标值 – x2和y2
* 注意
* 该元素是起始元素
* x1和y1、x2和y2的值都是百分值
* 定义id属性
* 用于将设置的渐变添加到绘制的图形元素中
* 使用元素 – 设置渐变的颜色
* offset – 设置渐变颜色的位置
* 该值也是百分值
* stop-color – 设置渐变颜色
* stop-opacity – 设置渐变颜色的透明度
–>
<!–
如何可以将上面设置线型渐变,添加在下面的矩形中?
* 使用fill属性,值为url(#渐变元素的id值)
–>
* 扇形(射线)渐变 –
* 滤镜 – 高斯模糊
* 滤镜使用元素
* 元素 – 高斯模糊
* in=”SourceGraphic”
* stdDeviation – 设置模糊程度
立即学习“前端免费学习笔记（深入）”；
复制代码代码如下:
<!–
如何设置高斯模糊滤镜
* 定义元素 – 滤镜定义在该元素中
* 定义元素 – 表示SVG的滤镜
* 定义高斯模糊元素
* 属性
* in=”SourceGraphic” – 固定写法
* stdDeviation – 设置模糊程度
* 为元素定义id属性值
* 方便添加在绘制图形的元素中
–>
<!–
如何将上面的高斯模糊与下面的元素进行关联
* 使用filter属性,值为url(#id)
* 设置当前图形的滤镜
–>
* 注意 – 定义在元素中
* TWO.js
* 基本内容
* JS库介绍
* three.js – 专门用于绘制三维图形
* two.js – 专门用于绘制二维图形
* two.js支持的格式
* SVG – 默认
* Canvas
* WebGL – 专门用于绘制图像
* 如何使用two.js
* 在HTML页面中引入two.js文件
* 在HTML页面中定义容器(
)
* 在javascript代码中
* 获取HTML页面中的容器
* 创建Two对象,将该对象添加到容器中
new Two(params).appendTo(Element);
* 使用two.js提供的API方法进行绘制
* 利用two.js提供的方法,设置图形
* 利用update()方法进行绘制
* 创建Two对象
* 构造器 – new Two(params)
* params参数 – 设置当前对象的信息
* type – 设置当前使用的格式(Two.Types.svg)
* svg – 默认值
* canvas
* webgl
* width和height – 设置宽度和高度
* fullscreen – 设置是否全屏
* Boolean值,true表示全屏
* 图形方法
* makeLine() – 绘制线条
* makeRectangle() – 绘制矩形
* makeCircle() – 绘制圆形
* makeEllipse() – 绘制椭圆
* 动画方法
* update() – 更新动画
* play() – 添加动画(循环)
* pause() – 删除动画
* 设置绘制图形的样式
* 调用Two对象的绘制方法绘制图形时,返回该图形对象
* 通过该图形对象,设置相关属性值
* 分组操作
* Two.Group
* 动画效果
* bind(event,callback)方法 – 事件绑定
* event – 绑定事件名称
* update – 对应update()方法的作用
* 所有的DOM事件都可以绑定
* callback – 事件处理函数
* 扩展内容
* 前端开发工具
* Aptana Studio 3 – 代码提示
* Webstrom – 国内前端开发人员神器
* 实际开发中
* 多用SVG
* 不失真
* 可被搜索
* 页面优化 – 减少外部链接
*
* 
* Canvas – HTML绘制图形
* 实际运行中,是以图片方式出现(.png)
* 不能被搜索引擎抓取
* 放大后失真
* SVG内容
* 内容量非常大
* 静态绘制图形
* 动态动画效果
* 专门提供事件
* 网上关于SVG的资料很少(没有书籍)
* SVG的规范(W3C英文)
* SVG或CANVAS在HTML页面中定义
* 是只能定义一个元素,还是可以定义多个元素?
* 在一个HTML页面可以定义多个或元素
* SVG还是CANVAS都是允许同时定义(绘制)多个图形
* 在实际开发中的使用
* SVG在将来的工作开发,使用率并不高
* SVG图片一般都是由UI设计师来完成
* SVG即使是我们自己来设计(绘制)
* 目前网络上很多专门提供现成的SVG图片的网站
* 使用JS库
————————————————————————————>为了生活而改变，为了改变而创造.
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2913973.html
