H5中SVG的使用
2016-12-18 本文已影响0人
云音流
一、 SVG — 可缩放矢量图形
1、 什么是SVG
-
SVG是一种使用XML技术描述二维图形的语言,svg是一种矢量图
-
并不属于HTML5专有内容，在HTML5出现之前，就有SVG内容，HTML5只不过提供了SVG原生的内容
-
svg文件的扩展名为.svg
2、 SVG的优势
- 可通过文本编辑器来创建和修改
- 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG可在任何的分辨率下被高质量的打印
- 可在图片质量不下降的情况下被放大
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- 支持事件绑定
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
3、 SVG与canvas的区别
-
SVG - 实际开发中，多用SVG
不依赖分辨率 支持事件处理器 不适合游戏 大型渲染区域的程序(例如，百度地图) -
Canvas
依赖分辨率 不支持事件绑定 最适合网页游戏 可以用图片格式保存图像
不是是SVG还是Canvas，在一个页面中都可以同时定义多个
4、用途
静态绘制图形
动态动画效果
专门提供事件
二、SVG — 绘制图形
1、创建SVG元素 <svg> </svg>
类似于canvas元素，可在元素内写 width=" " height=" "
但可以使用css样式
使用svg绘制图形，必须定义在svg元素中
2、画矩形 —— 创建矩形元素
<rect x="100" y="100" width="200" height="150" fill="blue" stroke="red" stroke-width="5"> </rect>
如果使用style属性来设置他的样式，例如设置背景颜色style="background:red"是不行的，要使用style="fill:red"
3、画圆形 —— 创建圆形元素
<circle cx="50" cy="50" r="50"></circle>
4、画椭圆形 —— 创建椭圆元素
<ellipse cx="" cy="" rx="" ry="">
cx 属性定义原点的 x 坐标
cy 属性定义原点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径
ry = rx 画出来的就是一个圆
5、 画直线 —— 创建直线元素
颜色必须得加
<line x1=" " y1=" " x2=" " y2=" " stroke-width=" " stroke=" ">
填上对应的数值
6、 画折线 —— 创建折线元素
points - 设置起点 折点及重点，x和y用逗号分隔，多个折点用空格隔开
会默认将折线中的区域(起点到终点)，默认提供黑色,将fill设置为canvas的颜色，将stroke设置为另一种颜色
<polyline points=" " stroke=" " fill=" "></polyline> //最后的连接点无法完整的连接
7、 画多边形 —— 多边形元素
//不用考虑折点的显示问题
<polygon points="">
*例子 *
<svg id="" style="width:400px;height:400px;background-color:yellow;">
<rect x="150" y="150" width="100" height="100" fill="red" stroke="black" stroke-width="5px"></rect>
<circle cx="80" cy="80" r="50" fill="red"></circle>
<ellipse cx="90" cy="300" rx="90" ry="50"></ellipse>
<line x1="10" y1="10" x2="200" y2="200" stroke-width="2" stroke="white" ></line>
<polyline points="100,20 300,70 200,300 100,20" stroke="#e4393c" fill="yellow"></polyline>
<!-- line只能设置一次 -->
<!--<line x1="280" y1="200" x2="300" y2="100" stroke-width="2" stroke="white">-->
</svg>
<script type="text/javascript">
var rect=document.querySelector("svg rect");
//无法通过js修改属性
console.info(rect.width);
</script>
三、SVG — 渐变
1、 线性渐变步骤
-
首先在html里面创建SVG元素
<svg></svg> -
然后在svg里追加defs元素
<svg> <defs></defs> </svg> -
在defs里追加linearGradient元素，他才是真正实现渐变的元素
<svg> <defs> <linearGradient x1="" y1="" x2="" y2=""></linearGradient> </defs> </svg> //x1、y1:起点坐标值 //x2、y2:终点坐标值 //注意： 这四个值都是百分比 -
在linearGradient里面追加stop元素，stop元素真正设置渐变颜色
<svg> <defs> <linearGradient> <stop offset="" stop-color="" stop-opacity=""> <stop offset="" stop-color=""> </linearGradient> </defs> </svg> // offset: 值为百分比 // stop-color:设置渐变颜色 // stop-opacity:设置渐变颜色的透明度 -
在defs下面追加<rect>,画出图形,并将上面设置的线性渐变，添加到矩形中
//使用fill属性，值为url(#渐变元素的id值) <rect x="0" y="0" width="400" height="400" fill="url(#def)">
2、 扇形渐变radialGradient，参考线性渐变
四、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>
<!-- 滤镜使用filter元素
in="SourceGraphic" - 固定写法
-->
效果
- 更改 stdDeviation元素的值，会产生相应的效果
- 设置为负数 无效 会默认为 0
- 可以试试不断增加 stdDeviation元素的值，看它怎么变化的
