svg矢量图

svg简介

Scalable Vector Graphics可缩放⽮量图形

SVG 图像在放⼤或改变尺⼨的情况下其图形质量不会有所损失

svg知识点svg如何绘图svg和cnavas区别svg如何实现动画效果

svg应⽤场景1.图表2.图标 icon3.动效

4.⽮量图：由点/线/图形（基本图形） SVG元素开始

使⽤1. 直线

2. 矩形

（rx ry 是矩形的圆⾓ ，不加也可以即没有圆⾓）⾊）

（⾃动填充为⿊3. 圆形

（⾃动填充为⿊⾊）4. 椭圆

（rx 横轴半径 ry 纵轴半径 ，cx,cy圆⼼坐标） （⾃动填充为⿊⾊）5. 折线

（⾃动填充为⿊⾊，变折线可进⾏以下处理）

//默认为填充样式

polyline{

fill:transparent; stroke:red; }

//设置polyline变折线

6. 多边形

（原理同polyline 区别在于polyline是线 polygon是图形）7. ⽂本

hello,world 样式属性1.fill 填充2.stroke 描边3.stroke-width 线宽4.stroke-opacity/fill-opacity5.stroke-linecap6.stroke-linejoin path元素

1. M指令和L指令 （moveTo lineTo） （d 路径 ）m指令和l指令

⼤写表⽰绝对定位，⼩写表⽰相对定位绝对坐标和相对坐标 相对于上⼀个移动距离2.H和V命令

⽔平（horizontal lineto）竖直（vertical lineto）⽅向移动距离3.Z命令

注：闭合 Z不区分⼤⼩写4.圆弧指令

A命令 (elliptical Arc) 七个参数

rx ry x-axis-rotation large-arc-flag sweep-flag x y• rx ry圆弧的x轴半径和y轴半径

• x-axis-rotation 圆弧相对x轴的旋转⾓度，默认是顺时针，可以 设置负值• large-arc-flag 表⽰圆弧路径是⼤圆弧还是⼩圆弧 1⼤圆弧

• sweep-flag 表⽰从起点到终点是顺时针还是逆时针，1表⽰顺 时针，0表⽰逆时针• x y 表⽰终点坐标，绝对或相对

贝塞尔曲线1. ⼆次贝塞尔Q x1 y1, x y T x y （拓展）

对称点三次贝塞尔曲线C x1 y1, x2 y2, x yS x2 y2, x y

⾃动⽣成路径Method Draw

SVG 渐变1.线性渐变 （定义）

2.径向渐变

SVG 滤镜1.⾼斯滤镜

2.其他滤镜

SVG 路径动画

1. stroke-dasharray： 100px; 切割线段，展⽰成虚线 stroke-dasharray： 10px 20px 30px; （切割线段的间隔）2. stroke-dashoffset: 15px; 偏移量

抽风动画效果

js操作svg

1.getTotalLength( )获取路径总长度

2.getPointAtLength(x)

获取路径上距离起始点距离x长度的点的坐标

注：严格来说上⾯两⽅法只适⽤于path元素，但各个浏览器实现起来都会有⼀点区别。例如⾕歌浏览器也能获取到line元素的路径长度。

viewPort 表⽰SVG可见区域的⼤⼩，画布⼤⼩1.宽500单位，⾼300单位

ViewBox 表⽰视区盒⼦

1.

2.preserveAspectRatio(作⽤的对象都是viewBox)preserveAspectRatio=\"xMidYMid meet\"

svg.setAttribute(\"preserveAspectRatio\

第1个值表⽰，viewBox如何与SVG viewport对齐；第2个值表⽰，如何维持⾼宽⽐（如果有）第1个值⼜是由两部分组成的。前半部分表⽰x⽅向对齐，后半部分表⽰y⽅向对齐设置填充⽅式

meet:保持纵横⽐缩放viewBox适应viewport

slice:保持纵横⽐同时⽐例⼩的⽅向放⼤填满viewport (在均匀缩放的同时保持viewbox的宽⾼⽐)none: 扭曲纵横⽐以充分适应viewportJS ⽣成SVG元素

1、创建SVG元素需要指定命名空间

2、SVG元素对象⼀般通过调⽤setAttribute()⽅法来设定属性值

canvas与svg

canvas与svg

SVG特点：不依赖分辨率,⽀持事件处理器,最适合带有⼤型渲染区域的应⽤程序（⽐如⾕歌地图）,复杂度⾼会减慢渲染速度（任何过度使⽤DOM 的应⽤都不快）,不适合游戏应⽤ Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进⾏渲染的。在 canvas 中，⼀旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发⽣变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

特点：依赖分辨率,不⽀持事件处理器,弱的⽂本渲染能⼒能够以 .png 或 .jpg 格式保存结果图像,最适合图像密集型的游戏，其中的许多对象会被频繁重绘。