mozhi00 2019-07-01
SVG文件可单独使用,使用XML定义并包含DTD声明:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
在现代浏览器中,我们可以直接在HTML代码中嵌入SVG代码:
<div class="svg-wrap"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> </div>
即<svg>标签,svg有三个视图相关的属性:
viewBox ='20 20 100 100'
定义了起始坐标为(20, 20),宽高为100的矩形区域,演示地址用法 <align> [<meet or slice>] align: xMid xMin xMax 和 YMid YMin YMax 自由组合 e.g. preserveAspectRatio = "xMidYMid meet"
svg绘制基本图形元素,只要明确好各个参数的含义,应该很简单,老铁们快速过一遍:
矩形,rx,ry定义圆角 <rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="yellow"></rect> 圆 cx cy 定义圆心 <circle cx="50" cy="50" r="40" fill="yellow"></circle> 椭圆 rx ry 定义长轴半径、短轴半径 <ellipse cx="50" cy="50" rx="40" ry="20" fill="yellow"></ellipse> 线段 <line x1="10" y1="10" x2="90" y2="90" stroke="yellow"></line> 折线 点与点之间用空格隔开 <polyline points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" fill="transparent"></polyline> 多边形 <polygon points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" fill="transparent"></polygon> 路径,可以绘制上述所有图形 d属性定义路径的具体形式 <path d="M10,10 C40,5 40,140 100,100" stroke="#fb3" stroke-width="4px"></path> 文字 dx dy是相对起点坐标的偏移量,rotate指定单个文字的旋转 <text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20">示例文字</text>
主要有
<g> <defs> <symbol> <use> <clipPath> <linearGradient> 等
可以参考这个 codepen 演示 来理解。
why svg?如果你问我为什么用svg做动画,而不是其他技术,那可以告诉你以下几点:
SMIL 动画 Demo
基于SMIL标准,可以直接借助svg animate标签实现动画。
目前SMIL动画多数都可以用css3来代替,但要让某个物体沿着特定路径移动,css3就无能为力了(除了chrome46新增的motion-path)。
遗憾的是,SMIL标准正逐渐衰落,并不会成为未来世界的主流,它正逐渐被css3所代替,所以我们只需简单了解svg中的SMIL特性即可。
set 元素可以在特定时间后,瞬间修改图形元素的某个属性值,它不是动画,是一种突变。
animate元素定义在图形元素里面,它可以改变图形某一个属性的值,需要指定起始值和结束值(from to)以及持续时间(dur)
animateMotion它可以引用一个事先定义好的动画路径,用<mpath>元素引用,让图形按路径定义的方式运动。
类似于css transform,它可以改变图形的transform属性,e.g. rotate | translate | scale | skewX | skewY
snap.svg 动画 Demo
通过css或js修改svg图形的属性也可实现动画,这种方式也是目前最常用的。这就涉及到其他的知识点了,css3的transform,transition,animation等,js的setInterval和requestAnimationFrame。除了用原生代码控制,我们当然也可以用业界已经成熟的动画库来操作属性:
// animejs api var animation= anime({ targets: '#svg-path', // 目标元素,支持css选择器,dom,dom数组等 opacity: '0', 要变化的属性,这里是opacity属性,可以是任何css或svg属性 duration: 3000, delay: 1000, easing: 'easeInOutQuart', loop: true, direction: 'reverse', // 动画方向:逆向播放 complete: function(anim) { } });
常见的图形属性如下所示:
由于svg技术过于强大,此文章只是抛砖引玉,更多精髓等待大家发掘:
method draw | 在线制作svg图片
svgo | 强大的svg压缩工具
svg trick | 一个研究svg技术的网站
vivus | 制作svg路径动画的js库
snap.svg.js | svg中的jquery
snap.svg中文文档
鑫空间,鑫生活 | 博主对svg和css研究很深