SVG的绘制及实现网页动画效果

时间：2023-07-05 14:48:01 | 来源：网站运营

时间：2023-07-05 14:48:01 来源：网站运营

SVG的绘制及实现网页动画效果：

一、svg是什么

SVG是一种XML语言，类似XHTML，可以用来绘制矢量图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。

二、svg基础图像的绘制

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> // 矩形绘制 <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>// 圆形和椭圆 <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>// 直线和曲线 <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/> <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/>// 多边形 <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/>// 路径 <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/></svg>1.矩形

<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>x：矩形左上角的x位置

y：矩形左上角的y位置

width：矩形的宽度

height：矩形的高度

rx：圆角的x方位的半径

ry：圆角的y方位的半径




2.圆形

<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>r：圆的半径

cx：圆心的x位置

cy：圆心的y位置




3.椭圆

<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>rx：椭圆的x半径

ry：椭圆的y半径

cx：椭圆中心的x位置

cy：椭圆中心的y位置




4.线条

<line x1="10" x2="50" y1="110" y2="150"/>x1：起点的x位置

y1：起点的y位置

x2：终点的x位置

y2：终点的y位置




5.折线

<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>points：点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。

6.路径：做复杂图形的重点

path可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。

6.1 path命令

<path>元素d属性命令：M = moveto(M X,Y) ：将画笔移动到指定的坐标位置L = lineto(L X,Y) ：画直线到指定的坐标位置H = horizontal lineto(H X)：画水平线到指定的X坐标位置V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线S = smooth curveto(S X2,Y2,ENDX,ENDY)：平滑曲率Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线Z = closepath()：关闭路径6.2 基础属性

stroke：设置绘制对象的线条的颜色。

fill: 设置对象内部的颜色。

fill-opacity：控制填充色的不透明度。

stroke-opacity：描边的不透明度。

stroke-width：定义了描边的宽度。

stroke-linecap：它控制边框终点的形状，

stroke-linecap属性的值有三种可能值：

• butt用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。
• square的效果差不多，但是会稍微超出实际路径的范围，超出的大小由stroke-width控制。
• round表示边框的终点是圆角，圆角的半径也是由stroke-width控制的。

stroke-linejoin：控制两条描边线段之间，用什么方式连接。

stroke-dasharray：将虚线类型应用在描边上。

stroke-dasharray属性的参数，是一组用逗号分割的数字组成的数列。注意，和path不一样，这里的数字必须用逗号分割（空格会被忽略）。每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。

6.3线性渐变

线性渐变沿着直线改变颜色，要插入一个线性渐变，你需要在SVG文件的defs元素内部，创建一个<linearGradient>节点。<linearGradient>元素还需要一些其他的属性值，它们指定了渐变的大小和出现范围。渐变的方向可以通过两个点来控制，它们分别是属性x1、x2、y1和y2，这些属性定义了渐变路线走向。渐变色默认是水平方向的，但是通过修改这些属性，就可以旋转该方向。下例中的Gradient2创建了一个垂直渐变。

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </linearGradient> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </linearGradient> <style type="text/css"><![CDATA[ #rect1 { fill: url(#Gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]></style> </defs> <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> </svg>

三、基础变形

<g>元素：可以把属性赋给一整个元素集合。

平移：translate()变形方法

<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />旋转：transform: rotate( )方法

倾斜：transform: skewx( )方法

透视：perspective（）方法

matrix：指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

语法

matrix(a, b, c, d, tx, ty)matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。

四、配合CSS3的animation实现svg动画

<svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="10" x2="600" y1="110" y2="110" stroke="orange" fill="transparent" stroke-width="8" /> </svg>先画一条线

实现的方法有两种

（1）利用stroke-dasharray和stroke-dashoffset这两个属性，对于stroke-dasharray可以参考下图来理解：

而stroke-dashoffset则可以理解成类似translate的偏移值。通过CSS来设置这两个值，之前的路径就会变成这个样子：

.line{ stroke-dasharray: 20px, 10px; stroke-dashoffset: 0;}得到如下效果

配合css animation 让线的虚线实部分由0到全部，空的部分由全部到0就实现了以下效果

.line{ animation: move 3s linear forwards;}@keyframes move { 0%{ stroke-dasharray: 0, 800px; } 100%{ stroke-dasharray: 800px, 0; }}800px这个值是整条直线的长度，如果是复杂路径可以用DOM的API来获取到路径长度值：

document.getElementById('path').getTotalLength()（2）直接让线进行平移动画，就是基础的css动画效果

.line{ animation: move 3s linear forwards;}@keyframes move { 0%{ transform: translateX(-100%); } 100%{ transform: translateX(0); }}实现如上图一样的效果

如果线条比较复杂就必须用到path路径，比如作者最近做的一个动画效果：

复杂动画最重要的是path的路径，得到路径就可以用线条去实现：

<svg width="180" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="pathSecond" fill="none" stroke="rgba(0,0,0,0.8)" stroke-width="2px" d="M73.73,24.5c0,0,2.78-21.26-23.75-16.46 c0,0-11.12-12.63-25.01-5.81c0,0-11.12,4.8-8.84,16.67 c0,0-13.81-2.27-16.13,13.39c0,0-3.07,10.67,10.32,16.71h180.02" /> </svg>path中的d路径可以打开AI，用钢笔工具描线条，然后保存为svg格式，用记事本打开文件就能获取path了，然后配合animation

#pathSecond { stroke-dashoffset: 0; animation: move 3s infinite linear;}@keyframes move { 0%{ stroke-dasharray: 0, 600px; opacity: 1; stroke-width: 3px } 100%{ stroke-dasharray: 600px, 0px; opacity: 0; }}就可以得到这个效果了

还可以试试其他的基础变形，去做svg动画。




参考文章：MDN和本站文章