1、svg简介
中文全称是可缩放的矢量图。跟其他图片(.jpg,.png...)相比，主要区别在于它无论放大多少倍都不会失真。用过ps的都知道，一张图片放大后会出现锯齿状的现象，这个就叫做失真。
2、svg基础标签
A、创建一个svg
代码展示：
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg style="background:white"></svg>
</body>
</html>
图片展示：
svg默认宽度是300px，高度是150px，无颜色显示。所以我给它加了一个背景色。
B、svg基础属性认知
- width->宽度
- height->高度
- viewBox->将svg画板的坐标映射的一个相对坐标系中
- 如果无法理解svg可以看下，下方的参考文章或者视频，会有收获！！！
C、其他基本图像
注意：浏览器左上角为坐标原点，即(0,0),横向是x轴，纵向是y轴
代码展示：
<!DOCTYPE html>
<html>
<head></head>
<body>
<!--
viewbox的参数表示
viewbox = "x轴坐标 y轴坐标 宽 高"
***注意：示例中宽高是没有px的，因为是相对坐标系，所以可以理解为100px***
-->
<svg style="background:white" width ="500px" height = "500px" viewbox = "0 0 100 100">
<!--
矩形
x => x轴坐标
y => y轴坐标
width => 矩形的宽度
height => 矩形的高度
-->
<rect x = "10" y="10" width = "20" height="10"/>
<!--
多边形
points = "从左往右的第一个坐标x,y 第二个坐标x,y 第三个坐标x,y ..."
***注意：最后的那个坐标可闭合也可以不闭合***
-->
<polygon points="0,0 10,0 20,5 5,5 0,0"/>
<!--
圆
cx => 圆心坐标(center x)
cy => 圆心坐标(center y)
r => 半径 (radius)
-->
<circle cx ="20" cy="30" r="5"/>
<!--
椭圆形
cx => 圆心坐标(center x)
cy => 圆心坐标(center y)
rx => x轴方向的半径 (radius x)
ry => y轴方向的半径 (radius y)
-->
<ellipse cx ="40" cy="30" rx="5" ry="10"/>
<!--
直线
x1 => 线段的第一个端点的x坐标
y1 => 线段的第一个端点的y坐标
x2 => 线段的第二个端点的x坐标
y2 => 线段的第二个端点的y坐标
***
注意：
直线默认无填充色，通过stroke进行颜色填充
stroke-width可调整线条的宽度，线条宽度默认为1px
***
-->
<line x1="50" y1="30" x2="60" y2="10" stroke="red" stroke-width='0.2'/>
<!--
折线
points = "从左往右的第一个坐标x,y 第二个坐标x,y 第三个坐标x,y ..."
***
注意：
直线默认无填充色，通过stroke填充边框的颜色
stroke-width可调整线条的宽度，线条宽度默认为1px
fill 可以更改填充色，改为透明(transparent)及无色
***
-->
<polyline points = "45,0 50,0 50,15 40,15 45,0" fill = "transparent" stroke="red" stroke-width='0.2'/>
<!--
文本
x => x轴坐标
y => y轴坐标
style => 可以设置文字的大小，字体类型，颜色等等
-->
<text x="10" y="50" style="font-size:5">你好！大帅哥</text>
<!--
常用的stroke系列属性
stroke-opacity => 设置透明度0-1之间
stroke-dasharray => 把设置虚线，边框为虚线（每隔多少单位画线）
stroke-dashoffset => 属性的偏移量
-->
</svg>
</body>
</html>
效果展示：
D、stroke属性系列和transform属性系列粗解
代码展示：
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg style="background:white"
width ="500px"
height = "500px"
viewbox = "0 0 100 100">
<!--
常用的stroke系列属性
x => x轴坐标
y => y轴坐标
width => 矩形的宽度
height => 矩形的高度
fill => 修改填充色
stroke => 设置线条的颜色
stroke-opacity => 设置透明度0-1之间
stroke-dasharray => 把设置虚线，边框为虚线（每隔多少单位画线）
stroke-dashoffset => 属性的偏移量
-->
<rect x = "10" y="10" width = "20" height="10"
fill = "transparent" stroke="black" stroke-opacity='0.5'
stroke-dasharray='1 2 3 4' stroke-dashoffset='1'/>
<!--
变换类型的属性：平移，旋转，缩放变换
x => x轴坐标
y => y轴坐标
width => 矩形的宽度
height => 矩形的高度
transform => scale(倍数) 放大或者缩小图像
rotate(旋转角度)正数为顺时针旋转，负数为逆时针旋转
***以图形为中心放大图像需设置以下两个属性***
transform-origin => 指定整个svg/viewbox为中心
transform-box => 指定整个图形为中心
-->
<rect x = "50" y="10" width = "20" height="10"
style="transform-box:fill-box;transform-origin:center"
transform="scale(1.3) rotate(45)"/>
<!--
g标签
用来分组，在这个标签上加上id或者class，用来选中多个图像
-->
<g id="group1">
<polygon points="0,0 10,0 20,5 5,5 0,0"/>
<circle cx ="20" cy="30" r="5"/>
</g>
</svg>
</body>
</html>
效果展示：
E、基础动画学习
代码展示：
<!DOCTYPE html>
<html>
<head></head>
<style>
/*
animation参数介绍
=>例子：animation: name 1s ease 2s 1 normal
=>解释: animation: 动画名称 持续时间 动画持续时间的分布(默认是ease函数) 延时多久执行 持续几次动画(默认1次) 对称执行
->ease介绍,例如一个从左到右的一个动画，刚开始比较慢，中间比较快，结束时又比较慢
->动画播放次数可以时有限次和无限次(infinite)
->对称执行默认值为normal，当设置为alternate时，例子中会先放大再缩小
*/
#r1{
animation: move 1s ease 1s infinite alternate;
}
/* keyframes关键帧 */
@keyframes move{
0%{
transform:scale(0.5)
}
100%{
/* 设置x后会往左移或者右移;设置fill会出现黑色变红色的过程*/
transform:scale(2);x:30;fill:#c04851;
}
}
</style>
<body>
<svg style="background:white"
width ="500px"
height = "500px"
viewbox = "0 0 100 100">
<!--
常用的stroke系列属性
x => x轴坐标
y => y轴坐标
width => 矩形的宽度
height => 矩形的高度
-->
<rect id="r1" x = "10" y="10" width = "20" height="10" />
</svg>
</body>
</html>
效果展示：
参考文章或视频：
图解SVG的核心概念_SVG, SVG之旅, 会员专栏 教程_W3cplus
【svg】有趣的svg入门篇 | svg的常见标签、属性与动画_哔哩哔哩_bilibili
