svg系列:1.svg基础知识 & 不一样的svg动画世界

mozhi00 2019-07-01

1、 svg知识扫盲

svg简介

  • SVG(Scalable Vector Graphics),可缩放矢量图形,具有放大缩小不失真的特性,可以用来创建矢量图。
  • SVG1.1 于 2003 年 1 月 14 日成为 W3C 推荐标准。
  • SVG本质上是用XML语言描述的,所以它可以和DOM结构一样被CSS和JS编程控制,通过连续地改变SVG图形属性就可以创建SVG动画。
  • SVG可用文本编辑器编辑,也可通过Adobe Illustator等专业编辑软件处理。

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>标签,svg有三个视图相关的属性:

  • viewport 即用x, y, width, height定义的页面矩形区域
  • viewbox 定义用户视野的位置和大小,如 viewBox ='20 20 100 100' 定义了起始坐标为(20, 20),宽高为100的矩形区域,演示地址
  • preserveAspectRatio 保持横纵比,当viewport和viewbox 长宽比不一致时,该属性可以控制2者的对齐和裁剪情况,演示地址
用法
<align> [<meet or slice>]
align: xMid xMin xMax 和 YMid YMin YMax 自由组合 
e.g. preserveAspectRatio  = "xMidYMid meet"

svg系列:1.svg基础知识 & 不一样的svg动画世界

基本图形元素

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 演示 来理解。

2、svg动画

why svg?如果你问我为什么用svg做动画,而不是其他技术,那可以告诉你以下几点:

  • svg本质上是一种图形绘制技术,广泛用于web矢量图绘制,适用于多数商业logo,卡通图片制作。因此高清屏幕使用svg可避免模糊现象。(与此相关,canvas则是用来绘制点阵图(或者说位图),两者是相对的)
  • 基于不规则path的动画效果,如路径描边(path draw),路径变体(path morph),沿路径运动(path move)等,这是目前其他技术不太容易处理的。
  • 除了path,svg也支持渐变、裁切、遮罩等特性,在其他技术遇到瓶颈时,不妨考虑svg。这里是一个用到大量svg技术的网站 welikesmall,可以参考里面的效果实现。
  • 轻量,且兼容性好。svg于2003年已成为web标准,通常几十行svg代码就可解决特定的需求。svg在未来也有着可观的发展前景。

svg系列:1.svg基础知识 & 不一样的svg动画世界

SVG + SMIL 实现动画

SMIL 动画 Demo
基于SMIL标准,可以直接借助svg animate标签实现动画。

目前SMIL动画多数都可以用css3来代替,但要让某个物体沿着特定路径移动,css3就无能为力了(除了chrome46新增的motion-path)。

遗憾的是,SMIL标准正逐渐衰落,并不会成为未来世界的主流,它正逐渐被css3所代替,所以我们只需简单了解svg中的SMIL特性即可。

  • <set>

set 元素可以在特定时间后,瞬间修改图形元素的某个属性值,它不是动画,是一种突变。

  • <animate>

animate元素定义在图形元素里面,它可以改变图形某一个属性的值,需要指定起始值和结束值(from to)以及持续时间(dur)

  • <animateMotion>

animateMotion它可以引用一个事先定义好的动画路径,用<mpath>元素引用,让图形按路径定义的方式运动。

  • <animateTransform>

类似于css transform,它可以改变图形的transform属性,e.g. rotate | translate | scale | skewX | skewY

svg + css3 或 svg + js 实现动画

snap.svg 动画 Demo
通过css或js修改svg图形的属性也可实现动画,这种方式也是目前最常用的。这就涉及到其他的知识点了,css3的transform,transition,animation等,js的setInterval和requestAnimationFrame。除了用原生代码控制,我们当然也可以用业界已经成熟的动画库来操作属性:

  • anime.js (15kb左右,github 20k star, 最轻量,推荐使用)
  • velocity.js (50kb左右,不依赖jq,号称比css动画快)
  • snap.svg.js (svg中的jQuery,专业操作svg,80kb左右)
  • GreenSock (100kb左右,动画功能齐全,部分插件收费)
// 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) {
  }
});

常见的图形属性如下所示:

  • fill 定义填充颜色
  • fill-opacity 定义填充透明度
  • stroke 边框颜色
  • stroke-width
  • stroke-opacity
  • stroke-linecap 单条线端点样式 butt | round | square
  • stroke-dasharray 定义虚线样式,间隔定义实线和空白的长度,如 10 5 5 10
  • stroke-dashoffset 设置虚线描边偏移量,使图案向前移动
  • opacity
  • font-size | font-weight | font-family | font-style | text-decoration 同CSS
  • transform | transform-origin 同CSS
  • rotate svg独有,定义 单个文字 的旋转角
  • d 路径的描述属性

3、相关工具网站

由于svg技术过于强大,此文章只是抛砖引玉,更多精髓等待大家发掘:

method draw | 在线制作svg图片
svgo | 强大的svg压缩工具
svg trick | 一个研究svg技术的网站
vivus | 制作svg路径动画的js库
snap.svg.js | svg中的jquery
snap.svg中文文档
鑫空间,鑫生活 | 博主对svg和css研究很深

相关推荐