如何实现SVG动态标准

你可以在loading.io上看到很多惊艳的加载图标它们都是用svg写的，只有几行代码，比img图片更精细更节省体积，比纯dom实现更灵活高效。此外，您可以让图标响应点击事件。

这些圆和正方形怎么画？怎么上色？怎么搬？先看svg的基础，再画上面的第一个图标。

首先，基本图形元素svg有一些预定义的形状元素:矩形

1 & lt；！- viewBox定义画布大小宽度/高度定义实际大小-& gt；

2 & ltSVG xmlns = " http://www . w3 . org/2000/SVG " version = " 1.1 " width = " 300 " height = " 300 " view box = " 0 0 300 300 " & gt；

三

4 & lt！-直线(x1，y1)和(x2，y2)是两点坐标-& gt；

5 & ltline x 1 = " 0 " y 1 = " 0 " x2 = " 250 " y2 = " 30 "/>

六

7 & lt！-多边形通过多个点的坐标形成闭合图形->；

8 & lt多边形点="5，5 100，100 50，200" />

九

10 & lt；！-矩形(x，y)是左上角的起点-& gt；

11 & lt；rect x = " 100 " y = " 100 " width = " 120 " height = " 100 "/>

12

13 & lt；！-R圆心半径(cx，cy)-& gt；

14 & lt；circle CX = " 100 " cy = " 50 " r = " 40 " stroke = " black "/& gt；

15

16 & lt；！-左下角的文本(x，y)坐标-& gt；

17 & lt；text x = " 0 " y = " 20 " style = " font-size:16px；font-weight: bold " >试试SVG & lt/text & gt；18 19 & lt；/SVG & gt；二、样式和效果svg元素的样式可以写成标签的属性，也可以写成style。以下是一些主要的样式属性:

描边:描边颜色

笔画宽度:笔画宽度。

笔触不透明度:笔触的透明度

填充:填充颜色，即背景。

填充不透明度:填充颜色的透明度。

转换:图形转换，类似于css3转换。

Svg还支持很多滤镜效果，比如渐变、阴影、模糊、图像混合等等。不需要知道那么多，比如画几个彩色的圆，用circle with fill就可以了。

注意:默认情况下，变换基于svg的左上角，而不是圆心或其他中心。左上角是svg坐标系的原点。要了解变换和坐标系，可以在这里参考。

第三，辅助元素svg有几个辅助元素:

& ltg & gt元素通常用于对相关图形元素进行分组，以进行统一操作，如旋转、缩放或添加相关样式。

& lt使用& gt要实现现有SVG图形的重用，您可以重用单个SVG图形元素或

& ltdefs & gt内部定义的元素不会直接显示，您可以使用

& ltsymbol & gt能够创建自己的窗口

对于上面提到的变换基点问题，可以嵌套

1 & lt；SVG width = " 80px " height = " 80px " xmlns = " http://www . w3 . org/2000/SVG " view box = " 0 0 100 100 " preserve aspect ratio = " xmidy mid " >

2 & ltg transform="translate(20 50)" >

3 & ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # e 15b 64 " transform = " scale(0.99275 0.99275)"/>

4 & lt/g & gt；

5 & ltg transform="translate(40 50)" >

6 & ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f47e 60 " transform = " scale(0.773605 0.773605)"/& gt；

7 & lt/g & gt；

8 & ltg transform="translate(60 50)" >

9 & ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f8b 26 a " transform = " scale(0.42525 0.42525)"/& gt；

10 & lt；/g & gt；

11 & lt；g transform="translate(80 50)" >

12 & lt；circle CX = " 0 " cy = " 0 " r = " 7 " fill = " # abbd 81 " transform = " scale(0.113418 0.113418)"/>

13 & lt；/g & gt；

14 & lt；/SVG & gt；第四，动画的实现。svg的动画效果基于动画标签元素:

& ltanimate & gt实现单个属性的过渡效果，

& ltanimateTransform & gt实现变换变换的动画效果，

& lt动画情感& gt实现路径动画效果。

Svg可以灵活编写。样式可以作为标签属性写入，也可以写入样式中。动画标签可以通过xlink指定元素，也可以写在动画元素内部。animateTransform的xlink编写演示如下:

& ltSVG xmlns = " http://www . w3 . org/2000/SVG " & gt；

& ltrect id = " animate object " x = " 20 " y = " 20 " width = " 50 " height = " 50 " fill = " blue " & gt；& lt/rect & gt；

& lt动画变形

xlink:href = " # animate object " & lt；！-指定动画元素-& gt；

attributeName = " transform " & lt！-需要动画的属性的名称-& gt；

type = " scale " & lt！-指定转换属性-& gt；

begin = " 0s " & lt！-开始时间，即延迟-& gt；

dur = " 3s " & lt！-动画时间-& gt；

from = " 1 " & lt；！-起始值-& gt；

to = " 2 " & lt！-结束值-& gt；

repeatCount = " indefinite " & lt！-重复，无限重复-& gt；

/& gt；

& lt/SVG & gt；上面例子中的动画是从A到b的过渡，要形成一个平滑的循环，至少要定义三个关键点。AnimateTransform支持越来越灵活的属性设置:

Values:多个关键点的值，而不是from和to，例如values = " 0；1;0"

KeyTimes:对应数值，每个点的时间点。

CalcMode:动画速度模式。离散|线性|步调|样条

Keysplines:设置贝塞尔运动控制点，当calcMode为样条线时有效。

关于svg动画更详细的介绍，请参考这里。

动词 （verb的缩写）代码示例

Circle画一个圆，用颜色填充，用G标签包裹，定位。transform设置初始变形，animateTransform设置动画。现在看看代码，相信不会再迷茫了:

& ltSVG class = " LDS-message " width = " 80px " height = " 80px " xmlns = " http://www . w3 . org/2000/SVG " view box = " 0 0 100 100 " preserve aspect ratio = " xMidYMid " >

& ltg transform="translate(20 50)" >

& ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # e 15b 64 " transform = " scale(0.99275 0.99275)" & gt；

& ltanimate transform attributeName = " transform " type = " scale " begin = "-0.375s " calc mode = " spline " keySplines = " 0.3 0 0.7 1；0.3 0 0.7 1 " values = " 0；1;0 " keyTimes = " 00.5;1 " dur = " 1s " repeat count = " infinite " >& lt/animate transform & gt；

& lt/circle & gt；

& lt/g & gt；

& ltg transform="translate(40 50)" >

& ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f47e 60 " transform = " scale(0.773605 0.773605)" & gt；

& ltanimate transform attributeName = " transform " type = " scale " begin = "-0.25s " calc mode = " spline " keySplines = " 0.3 0 0.7 1；0.3 0 0.7 1 " values = " 0；1;0 " keyTimes = " 00.5;1 " dur = " 1s " repeat count = " infinite " >& lt/animate transform & gt；

& lt/circle & gt；

& lt/g & gt；

& ltg transform="translate(60 50)" >

& ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f8b 26 a " transform = " scale(0.42525 0.42525)" & gt；

& ltanimate transform attributeName = " transform " type = " scale " begin = "-0.125s " calc mode = " spline " keySplines = " 0.3 0 0.7 1；0.3 0 0.7 1 " values = " 0；1;0 " keyTimes = " 00.5;1 " dur = " 1s " repeat count = " infinite " >& lt/animate transform & gt；

& lt/circle & gt；

& lt/g & gt；

& ltg transform="translate(80 50)" >

& ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # abbd 81 " transform = " scale(0.113418 0.113418)" >

& ltanimate transform attributeName = " transform " type = " scale " begin = " 0s " calc mode = " spline " keySplines = " 0.3 0 0.7 1；0.3 0 0.7 1 " values = " 0；1;0 " keyTimes = " 00.5;1 " dur = " 1s " repeat count = " infinite " >& lt/animate transform & gt；

& lt/circle & gt；

& lt/g & gt；

& lt/SVG & gt；相关建议:

JS如何操作svg画图