前端SVG笔记与简单应用实例
一. 初识SVG
SVG能够绘制一些CSS难以做到的复杂图像和动画。而且放大不失真。
二. 基础语法
（1）SVG代码全都放在顶层标签< svg > …< / svg >之中。
（2）SVG也有宽高属性，< svg width=“100%” height=“50” > ，如果不指定宽与高，则默认大小 宽300px，高150px 。
（3）如果只展示SVG图像的一部分。则要指定 viewBox 属性。
<svg width="100" height="100" viewBox="50 50 50 50">
<circle i-="mycircle" cx="50" cy="50" r="50"/>
</svg>
- 1
- 2
- 3
viewBox属性的值有四个数字,分别是左上角的横坐标和纵坐标，视口的高度和宽度。上面代码中: SVG图像是100像素宽100像素高. viewBox属性指定视口从(50，50)这个点开始。所以,实际看到的是右下角的四分之一圆。注意，视口必须适配所在的空间。上面代码中， 视口的大小是5050 ,由于VG图像的时大小100100，所以视口会放大去适配SVG图像的大小.即放大了四倍。
（4）< circle > 标签代表圆形。
<svg width=" 300" height="180">
<cirqle cx="50" cy="50" r="25" class="yuan" />
</svg>
- 1
- 2
- 3
cx、cy、 r属性分别为横坐标，纵坐标和半径。< svg >画布的左上角是原点。也可以给标签设置class类名然后赋予css属性。
不过SVG的CSS属性与网页元素有些不同。
.yuan{
fill:填充色
stroke :描边色
stroke-width :边框宽度
}
- 1
- 2
- 3
- 4
- 5
（5）< line >标签，代表直线。
<svg> <line x1="10" y1="20" x2="100" y2="100" style="stroke: yellow;stroke-width: 5px;"></line> </svg>
- 1
- 2
- 3
x1 属性和y1属性,表示线段起点的横坐标和纵坐标; x2属性和y2属性,表示线段终点的横坐标和纵坐标; style属性表示线段的样式。
（6）< polyline >标签，代表折线。
<svg> <polyline points="1,1 80,81 87,8 54,14 " fill="none" style="stroke: yellow;"></polyline>
</svg>
- 1
- 2
- 3
points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔，点与点之间空格。
（7）< rect >标签代表矩形。
<svg> <rect x='1' y='1' height='50' width='60'></rect> </svg>
- 1
- 2
- 3
x属性和y属性, 指定了矩形左上角端点的横坐标和纵坐标; width属性和height属性指定了矩形的宽度和高度。
（8）< ellipse > 标签代表椭圆。
<svg width="600" height="600"> <ellipse cx='150' cy='50' rx='100' ry='50'></ellipse> </svg>
- 1
- 2
- 3
选择语言
cx属性和cy属性,指定了椭圆中心的横坐标和纵坐标(单位像索) ; rx属性和ry属性表示横向轴和纵向轴的半径(单位像素)。
（9）< polygon > 标签代表多边形。
<svg width="600" height="600"> <polygon points="0,0 50,0 70,70"></polygon> </svg>
- 1
- 2
- 3
points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。
（10）< path >标签代表路径。
<svg width="600" height="600"> <path d=" M 50,0 L 2,2 L 10,20 L 10,30 L 0, 90 Z "> </path> </svg>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
d属性表示绘制顺序,它的值是一个长字符串 ,每个字母表示一个绘制动作 ,后面是坐标。大小写都得。
M:起始点(moveto)
L:画直线到( lineto )
Z:闭合路径
- 1
- 2
- 3
（11）< text >标签，用来绘制文本。
<svg width="600" height="600"> <text x='30' y='50' style="font-size: 50px; fill: none;>Hello</text> </svg>
- 1
- 2
- 3
x属性和y属性,表示文本区块基线( baseline )起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。
（12）< use >标签，可用来复制一个形状
<svg width="600" height="600"> <text id="fuzhi" x='30' y='50' style="font-size: 50px; fill: blue;">Hello</text> <use href="#fuzhi" x='100' y='100' ></use> </svg>
- 1
- 2
- 3
- 4
href属性指定所要复制的节点的id，x属性和y属性是左上角的坐标。另外,还可以指定width和height坐标。
（13）< g >标签，把多个形状放一组，用use直接复制一组。
<svg width="600" height="600"> <g id="fuzhi"> <text id="fuzhi" x='30' y='50' style="font-size: 50px; fill: blue;">Hello</text> <circle cx='100' cy='100' r='30'></circle> </g> <use href='#fuzhi' x='200' y='200'></use> </svg>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
（14）< defs >标签，里面代码不运行显示，除非用被引用。
<svg width="600" height="600"> <defs> <g id="fuzhi"> <text id="fuzhi" x='30' y='50' style="font-size: 50px; fill: blue;">Hello</text> <circle cx='100' cy='100' r='30'></circle> </g> </defs> <use href='#fuzhi' x='200' y='200'></use> </svg>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
（15）< pattern >标签，自定义一个形状,该形状可以被引用来平铺一个区域。
<svg width="600" height="600"> <pattern id="fuzhi" x='0' y='0' width='100' height='100' patternUnits="userSpaceOnUse"> <circle cx='100' cy='100' r='30'></circle> </pattern> <rect x='0' y='0' width='100%' height='100%' fill='url(#fuzhi)'></rect> </svg>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
上面代码中，< pattern>标签将一个圆形定 义为fuzhi。patternUnits="userSpaceOnUse"表示 < pattern>< pattern>的宽度和长度是实际的像索值。然后，指定这个模式去填充下面的矩形。
（16）< image >标签，引用一张图片。
<svg width="600" height="600"> <image xlink:href="新建文件夹/img/11.jpg"></image> </svg>
- 1
- 2
- 3
上面代码中 xlink:href属性表示图像的来源。
（17）< animate >标签，动画效果，可写多个。
<svg width="600" height="600"> <circle cx='50' cy='50' r='100'> <animate attributeName='cx' from='50' to='100' dur='1s' repeatCount='indefinite'></animate> <animate attributeName='cy' from='100' to='150' dur='1s' repeatCount='indefinite'></animate> <animate attributeName='fill' from='blue' to='white' dur='1s' repeatCount='indefinite'></animate> </circle> </svg>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
上面代码中,圆形会不断移动,产生动画效果。
attributeName :发生动画效果的属性名。
from :单次动画的初始值。
to :单次动画的结束值。
dur :单次动画的持续时间。
repeatCount :动画的循环模式。
（18）< animate > 标签对CSS的transform属性不起作用, 如果需要变形,就要使用< animateTransform >标签。
详细
<circle cx='50' cy='50' r='100'> <animateTransform attributeName="transform" type='rotate' begin='0s' dur='10s' from='0 50 50 ' to='100 50 50' repeatCount='indefinite' /> </circle>
- 1
- 2
- 3
上面代码中, 效果为旋转( rotate ) , 这时from和to属性值有三个数字,第1个数字是角度值，第二个值和第三个值是旋转中心的坐标。from=*0 50 50表示开始时，角度为0 ，开始旋转角度为100。
（19）< linearGradient > 定义线性渐变，用于图形元素的填充或描边。
详细
（20）< stop >定义一种颜色及其在渐变上使用的位置。此元素始终是< linearGradient >or< radialGradient >元素的子元素。
用法
<linearGradient id="myGradient" gradientTransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </linearGradient>
- 1
- 2
- 3
- 4
属性：
（20）preserveAspectRatio。有时候, 通常我们使用 viewBox 属性时, 希望图形拉伸占据整个视口。 在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例.
点击看MDN文档详细用法。
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" shape-rendering="auto"> <path class="wave3" fill="#0099ff" fill-opacity="1" d="M0,320L48,314.7C96,309,192,299,288,282.7C384,267,480,245,576,245.3C672,245,768,267,864,261.3C960,256,1056,224,1152,208C1248,192,1344,192,1392,192L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path> </svg>
- 1
- 2
- 3
三.JS操作SVG
跟普通标签一样使用便可。
四：简单应用实例
效果：
实现：
- 定义svg标签，这个可以自行下载想要的图：
<svg viewBox="0 0 1024 1024" width="300" height="300" > <path class="hua" d="M626.915 506.525z m28.242-295.422c-37.145-57.099-75.006-107.854-35.098-161.985-42.876-10.029-77.156 17.088-82.068 53.415-69.89 34.178-48.4 91.277-34.177 145.511 35.712 17.191 72.141 49.322 97.11 87.184 9.311 14.94 18.623 29.982 22.819 45.638 7.163 22.82 2.865 32.848 0.102 58.532 0 5.73 3.581 19.238 4.298 27.117 2.149 5.014 3.581 10.642 4.297 14.224 0.717 10.744-2.148 19.237-5.73 25.684 18.522-15.656 41.34-32.847 47.685-59.248 2.865-11.46 6.447-20.67 7.88-29.266 8.493-31.415 19.237-29.266 24.251-68.458 8.698-54.029-22-94.756-51.369-138.348zM482.53 236.686c0.717-12.178-37.963-97.826 31.313-138.45-67.844-49.323-168.535 11.255-160.553 89.025 27.014-24.15 83.5-4.81 129.24 49.425z m140.804 271.988z m0 0c2.15-5.014 3.582-10.642 2.865-19.954 0.717-5.014-2.148-12.074-4.297-18.521-2.15-6.447-3.582-14.94-3.582-23.536-1.432-7.163-0.716-13.61-0.716-20.67 0.716-12.177 0-22.82-4.298-35.713-17.191-54.234-80.02-114.3-125.761-125.659-73.677-83.602-119.315-72.244-145.716-54.439-23.536-12.177-79.305 0.614-102.738 38.476 84.933-0.716 123.613 190.638 186.545 236.276 54.336 38.578 71.425 24.354 112.05 37.964 35.61 8.596 62.01-2.047 85.648-14.224z m13.098 55.36c2.252-12.28 9.824-21.898 13.815-29.164 11.46-23.944 35.2-55.973 33.768-82.988-9.619 35.201-39.09 70.914-88.923 81.658-19.647 3.99-45.434 6.958-69.89-6.651 21.386 18.828 47.377 22.717 90.253 39.806l11.768-1.433c87.593 201.484-2.865 379.434-2.865 379.434 123.408-177.13 45.229-326.94 8.697-380.15l3.377-0.512z" p-id="4170"></path> </svg>
- 1
- 2
- 3
- 4
- 定义 svg 标签的基本样式：
svg{ border: 1px solid rgba(233, 233, 233, 0.9); box-shadow: inset 0 0 15px rgba(233, 233, 233, 0.9); cursor: pointer; transition: all 1.5s; }
- 1
- 2
- 3
- 4
- 5
- 6
border: 边框
box-shadow: 阴影
cursor: 鼠标样式
transition：过渡
- 定义花（path标签）的基本样式：
.hua{ fill: transparent; stroke: white; stroke-width: 5px; stroke-dasharray: 1235; stroke-dashoffset: 1235; fill: transparent; transition: all 1.5s; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
fill: transparent; 颜色透明
stroke: white; 边框白色
stroke-width: 5px; 边框宽5px
stroke-dasharray: 1235; 用于创建虚线
stroke-dashoffset: 1235; 偏移
详细用法看这，这个博主写得很直观。
当虚线跟图的边框一样长，再把它向左偏移同样大小，便相当于消失了。
- 鼠标经过svg时，取消偏移，线又慢慢回来，便有绘画描边的效果了：
svg:hover{ box-shadow: inset 0 0 15px rgba(233, 233, 233, 1), inset 0 0 20px rgba(233, 233, 233, 1); } svg:hover .hua{ stroke-dashoffset: 0; fill: red; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
完整代码：
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
</head>
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgb(0, 0, 0); } svg{ border: 1px solid rgba(233, 233, 233, 0.9); box-shadow: inset 0 0 15px rgba(233, 233, 233, 0.9); cursor: pointer; transition: all 1.5s; } .hua{ fill: transparent; stroke: white; stroke-width: 5px; stroke-dasharray: 1235; stroke-dashoffset: 1235; transition: all 1.5s; } svg:hover{ box-shadow: inset 0 0 15px rgba(233, 233, 233, 1), inset 0 0 20px rgba(233, 233, 233, 1); } svg:hover .hua{ stroke-dashoffset: 0; fill: red; /* animation: move 2s linear forwards; */ } /* @keyframes move{ 0%{ stroke-dashoffset: 1230; fill: transparent; } 50%{ stroke-dashoffset: 0; fill: transparent; } 100%{ stroke-dashoffset: 0; fill: red; } } */
</style>
<body> <svg viewBox="0 0 1024 1024" width="300" height="300" > <path class="hua" d="M626.915 506.525z m28.242-295.422c-37.145-57.099-75.006-107.854-35.098-161.985-42.876-10.029-77.156 17.088-82.068 53.415-69.89 34.178-48.4 91.277-34.177 145.511 35.712 17.191 72.141 49.322 97.11 87.184 9.311 14.94 18.623 29.982 22.819 45.638 7.163 22.82 2.865 32.848 0.102 58.532 0 5.73 3.581 19.238 4.298 27.117 2.149 5.014 3.581 10.642 4.297 14.224 0.717 10.744-2.148 19.237-5.73 25.684 18.522-15.656 41.34-32.847 47.685-59.248 2.865-11.46 6.447-20.67 7.88-29.266 8.493-31.415 19.237-29.266 24.251-68.458 8.698-54.029-22-94.756-51.369-138.348zM482.53 236.686c0.717-12.178-37.963-97.826 31.313-138.45-67.844-49.323-168.535 11.255-160.553 89.025 27.014-24.15 83.5-4.81 129.24 49.425z m140.804 271.988z m0 0c2.15-5.014 3.582-10.642 2.865-19.954 0.717-5.014-2.148-12.074-4.297-18.521-2.15-6.447-3.582-14.94-3.582-23.536-1.432-7.163-0.716-13.61-0.716-20.67 0.716-12.177 0-22.82-4.298-35.713-17.191-54.234-80.02-114.3-125.761-125.659-73.677-83.602-119.315-72.244-145.716-54.439-23.536-12.177-79.305 0.614-102.738 38.476 84.933-0.716 123.613 190.638 186.545 236.276 54.336 38.578 71.425 24.354 112.05 37.964 35.61 8.596 62.01-2.047 85.648-14.224z m13.098 55.36c2.252-12.28 9.824-21.898 13.815-29.164 11.46-23.944 35.2-55.973 33.768-82.988-9.619 35.201-39.09 70.914-88.923 81.658-19.647 3.99-45.434 6.958-69.89-6.651 21.386 18.828 47.377 22.717 90.253 39.806l11.768-1.433c87.593 201.484-2.865 379.434-2.865 379.434 123.408-177.13 45.229-326.94 8.697-380.15l3.377-0.512z" p-id="4170"></path> </svg>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
总结：
要运用 SVG 实现复杂的特效还是很困难的，任重道远啊。
文章来源: blog.csdn.net，作者：北极光之夜。，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/luo1831251387/article/details/113851289
- 点赞
- 收藏
- 关注作者
评论（0）