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

DirtyMind 发布于2019-08-23 16:30 / 3083人阅读

摘要：知识扫盲简介，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画，而不是其他技术，那可以告诉你以下几点本质上是一种图形绘制技术，广泛用于矢量图绘制，适用于多数商业，卡通图片制作。

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声明：

在现代浏览器中，我们可以直接在HTML代码中嵌入SVG代码：

即

viewport 即用x, y, width, height定义的页面矩形区域

viewbox 定义用户视野的位置和大小，如 viewBox ="20 20 100 100" 定义了起始坐标为(20, 20)，宽高为100的矩形区域，演示地址

preserveAspectRatio 保持横纵比，当viewport和viewbox 长宽比不一致时，该属性可以控制2者的对齐和裁剪情况，演示地址

用法
 []
align: xMid xMin xMax 和 YMid YMin YMax 自由组合 
e.g. preserveAspectRatio  = "xMidYMid meet"

基本图形元素

svg绘制基本图形元素，只要明确好各个参数的含义，应该很简单，老铁们快速过一遍：

矩形，rx，ry定义圆角

圆 cx cy 定义圆心

椭圆 rx ry 定义长轴半径、短轴半径

线段

折线 点与点之间用空格隔开

多边形

路径，可以绘制上述所有图形 d属性定义路径的具体形式

文字 dx dy是相对起点坐标的偏移量，rotate指定单个文字的旋转
示例文字

其他常用标签元素

主要有

等

可以参考这个 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 + SMIL 实现动画

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

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

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

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

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

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

类似于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技术过于强大，此文章只是抛砖引玉，更多精髓等待大家发掘：

混合云专线服务 svg动画 html的svg SVG _svg

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103103.html

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

摘要：知识扫盲简介，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画，而不是其他技术，那可以告诉你以下几点本质上是一种图形绘制技术，广泛用于矢量图绘制，适用于多数商业，卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来...

wwolf 2019-08-02 16:10 评论0 收藏0
SVG基础教程(超级详细)

摘要：光滑三次贝塞尔曲线指令跟在指令或指令后面补刀，它会自动在基础上生成一个对称点，所以指令只需要两个点就可以。二次贝塞尔曲线是控制点，表示的是曲线的终点。一、内置图形: rect(矩形) circle(圆) ellipse(椭圆) line(直线) polyline(折线) polygon(多边形) path(路径) 二、内置图形的html属性或(css样...

张宪坤 2019-08-21 17:42 评论0 收藏0
svg animation动画应用

摘要：建议直接用同学给的编辑器打开后直接引用，因为贝塞尔曲线真的不是随便就能住的。。。最近在做首页动画的时候，引入有背景色的mp4动图时，动图的背景色不能很好的融入相同背景色的不同浏览器和不同显示器，出现了下图这种尴尬的情况： showImg(https://segmentfault.com/img/bVbn6au?w=500&h=446); 动图的边界始终有根分界线，即使调整了背景色适应...

spacewander 2019-08-30 15:55 评论0 收藏0
svg animation动画应用

摘要：建议直接用同学给的编辑器打开后直接引用，因为贝塞尔曲线真的不是随便就能住的。。。最近在做首页动画的时候，引入有背景色的mp4动图时，动图的背景色不能很好的融入相同背景色的不同浏览器和不同显示器，出现了下图这种尴尬的情况： showImg(https://segmentfault.com/img/bVbn6au?w=500&h=446); 动图的边界始终有根分界线，即使调整了背景色适应...

peixn 2019-08-02 14:14 评论0 收藏0
HTML5 之 SVG

摘要：使用一个控制点的贝塞尔曲线叫做二次方贝塞尔曲线，使用两个控制点的贝塞尔曲线叫做三次方贝塞尔曲线。组内的所有元素都会继承标记上的所有属性。 SVG 总结的 svg 知识，方便以后复习查看 ~ ~ SVG是什么 SVG 表示可缩放矢量图SVG 用来定义WEB上使用的矢量图SVG 用XML格式定义矢量图SVG 在缩放时不会损失任何的图片质量SVG 文件里的所有元素和属性都可以运用动画效果SV...

CODING 2019-08-05 14:26 评论0 收藏0