SVG简介及其用法
2016-12-19 本文已影响118人
Alone灬旅途
一、SVG - 基础
1.什么是SVG
1) SVG是一种使用XML技术描述二维图形的语言,svg是一种矢量图
2) 并不属于HTML5专有内容，在HTML5出现之前，就有SVG内容，HTML5只不过提供了SVG原生的内容
3) svg文件的扩展名为.svg
2.SVG的优势
1）可通过文本编辑器来创建和修改
2）可被搜索引擎搜索到 ▲和canvas重要的区别
3）SVG可在任何的分辨率下被高质量的打印 ▲
4）可在图片质量不下降的情况下被放大
5）支持事件绑定 ▲
3.SVG与canvas的区别
SVG - 实际开发中，多用SVG
不依赖分辨率
支持事件处理器
不适合游戏
大型渲染区域的程序(例如，百度地图)
Canvas
依赖分辨率
不支持事件绑定
最适合网页游戏
可以用图片格式保存图像
不管是SVG还是Canvas，在一个页面中都可以同时定义多个
4.用途
静态绘制图形
动态动画效果
专门提供事件
5.svg再将来的工作开发，使用率并不高
SVG图片一般都是由UI设计师来完成
SVG即使是我们自己来设计，目前网络上有很多提供svg图片的网站
使用JS库来 two.js
二、SVG-绘制图形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Alone</title>
</head>
<body>
<!--1.创建svg,支持css-->
<svg style="width: 400px;height: 400px;background: pink;">
<!--都是通过fill来设置背景色-->
<!--矩形-->
<rect id="rect" x="100" y="100" width="50" height="50" fill="orange" stroke="red" stroke-width="5" style="fill:yellow;"></rect>
<!--圆-->
<circle cx="50" cy="50" r="50" fill="orange" stroke="yellow" stroke-width="5"></circle>
<!--椭圆-->
<ellipse cx="100" cy="210" rx="80" ry="50" fill="yellow"></ellipse>
<!--必须使用stroke设置线的颜色才能显示出来,只能设置直线，不能做折线-->
<!--直线-->
<line x1="0" y1="0" x2="400" y2="400" stroke="white"></line>
<!--折线-->
<!--会自动将折线包含的内容填充为黑色，但没闭合,使用fill将填充色设置为背景色-->
<!--用折线绘制矩形在闭合时有bug-->
<polyline points="100,20 20,100 200,200 100,20" stroke="red" stroke-width="10" fill="pink"></polyline>
<!--绘制多边形-->
<polygon points="100,350 20,100 200,200 100,350" stroke="red" stroke-width="10" fill="pink"></polyline>
</svg>
<script type="text/javascript">
var rect = document.getElementById("rect");
//因为svg绘制的内容都是dom元素，所以可以使用dom获取到，并给添加事件
rect.onclick = function () {
alert("杨可儿大菜鸡");
}
//通过js设置图形的属性是无效的，因为这些是只读属性
//rect.animVal.value = 50;
</script>
</body>
</html>
三、SVG-渐变
1、 设置线性渐变步骤
1）创建SVG元素
<svg></svg>
2）在svg里追加defs元素
<svg>
<defs></defs>
</svg>
3）在defs里追加linearGradient元素，他才是真正实现渐变的元素
<svg>
<defs>
<linearGradient x1="" y1="" x2="" y2=""></linearGradient>
</defs>
</svg>
x1、y1:起点坐标值
x2、y2:终点坐标值
注意： 这四个值都是百分比
4）在linearGradient里面追加stop元素，stop元素真正设置渐变颜色
<svg>
<defs>
<linearGradient>
<stop offset="" stop-color="" stop-opacity="">
<stop offset="" stop-color="">
</linearGradient>
</defs>
</svg>
offset: 值为百分比
stop-color:设置渐变颜色
stop-opacity:设置渐变颜色的透明度
5）在defs下面追加<rect>,画出图形,并将上面设置的线性渐变，添加到矩形中
使用fill属性，值为url(#渐变元素的id值)
<rect x="0" y="0" width="400" height="400" fill="url(#def)">
2、 扇形渐变radialGradient，参考线性渐变
渐变例子
<svg style="width:400px;height:400px;">
<!--
svg渐变效果几个问题
1.设置linearGradient的坐标值都得是百分比
2.通过stop设置颜色，offset的值必须是百分比，而且stop必须要有结束符<stop/>或者<stop></stop>
3.将绘制的图形与渐变效果结合时
1）fill="url(#渐变元素的id值)"
-->
<defs>
<!--linearGradient渐变元素-->
<!--id加在渐变元素里-->
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="100%">
<!--stop添加渐变颜色-->
<stop offset="0%" stop-color="red"></stop>
<stop offset="100%" stop-color="orange"></stop>
</linearGradient>
</defs>
<rect x="0" y="0" width="400px" height="400px" fill="url(#linear)" stroke="yellow" stroke-width="5"></rect>
</svg>
四、SVG-高斯模糊效果
<svg width="500" height="500">
<defs>
<filter id="Gaussian_Blur">
//fegaussianblur- 高斯模糊,stdDeviation - 设置模糊程度
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<rect x="0" y="0" width="400" height="400" filter="url(#def)">
</svg>
五、Two.js
1、 专门用于绘制二维图形，支持SVG Canvas WebGL
2、 特点
深度实现具有动画效果的矢量图
致力于更简洁地创建矢量图及动画效果
3、 官网
https://two.js.org/
4、 绘制步骤步骤
1） 在HTML页面引入two.js文件
<script src="two.js"></script>
2）.在HTML页面定义用于显示矢量图的容器
<div id="draw-shapes"></div>
3）.js代码获取元素
document.getElementById("draw-shapes");
4） 使用创建two对象，并追加到设置的容器内
var two = new Two(params).appendTo(elem);
5） 使用twojs的api确定要画的图形
var rect = two.makeRectangle(213, 100, 100, 100);
var circle = two.makeCircle(72, 100, 50);
6） 设置图形的样式
circle.fill = '#FF8000';
circle.stroke = 'orangered';
circle.linewidth = 5;
rect.opacity = 0.75;
rect.noStroke();
7） 绘制
two.update();
-
给图形分组
如果在HTML页面绘制多个图形，并且每个图形设置的样式相同，每个图形要重新设置一次，此时可以将这些图形设为一组，用组对象统一设置样式
two.makeGroup(rect,circle);
two.js作图例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1.导入two.js文件-->
<script type="text/javascript" src="two.js"></script>
</head>
<body>
<!--2.设置图形的容器-->
<div id="div">
</div>
<script type="text/javascript">
//3.获取到容器
var div = document.getElementById("div");
//4.创建two对象，并追加到容器里面
var two = new Two({
//有默认的宽和高,也可以自己设置
width:400,
height:400
}).appendTo(div);
//5.调用two的API作图,获取到图形对象，对图形对象进行样式设置
var rect = two.makeRectangle(-100,-100,200,200);
rect.fill = "red";
rect.stroke = "orange";
var circle = two.makeCircle(-100,-100,50);
circle.fill = "yellow";
circle.stroke = "blue";
//实现分组设置样式
var group = two.makeGroup(rect,circle);
group.fill = "green";
group.stroke = "pink";
circle.fill = "red";
//two.update();
//设置参考点
group.translation.set(200,200);
//1s 60次
two.bind("update",function () {
//写上动画逻辑
group.rotation += 10*Math.PI/180;
}).play();
</script>
</body>
</html>
