一. SVG介绍及优势
(1) SVG介绍
- Scalable Vector Graphics：可缩放⽮量图形
- ⼀种XML语⾔
- ⽂本，曲线，形状
(2) SVG 矢量图优点：
- 不失真，放大缩小图像都很清晰
- 学习成本低，也是一种 DOM 结构
- 使用方便，设计软件可以直接导出
二. 静态图形
(1) 一般图形
浏览器坐标系是左上角坐标中心,横向为x轴,纵向为y轴
代码如下:
<svg
style="background-color: yellow"
width="500px"
height="500px"
viewBox="0 0 100 100"
>
<!-- 下方width为20,是基于viewBox的100,height同理 -->
<!-- 矩形 -->
<rect x="10" y="10" width="20" height="10" />
<!-- 多边形 |points:指定各点坐标 -->
<polygon points="0,0 10,0 20,5 5,5" />
<!-- 圆形 |cx,cy:指定圆心坐标; r:指定半径 -->
<circle cx="20" cy="30" r="5" />
<!-- 椭圆 |cx,cy; rx,ry:指定x/y轴半径 -->
<ellipse cx="40" cy="30" rx="10" ry="5" />
<!-- 直线(默认无内部) |x1 y1 x2 y2 stroke:指定线轮廓颜色 stroke-width:指定线轮廓厚度 -->
<line x1="40" y1="0" x2="40" y2="10" stroke="black" stroke-width="0.5" />
<!-- 多段线(默认内部填充/图形) |points; fill:内部填充颜色 stroke; stroke-width -->
<polyline points="45,0 50,0 50,15 40,15" fill="transparent" stroke="black" stroke-width="0.5"/>
<!-- 文本 -->
<text x="10" y="50" style="font-size:4">hello</text>
</svg>
<!-- stroke-opacity:透明度 (0-1)-->
<!-- stroke-dasharray="1 2 1":以121形式虚线 -->
<!-- stroke-dashoffset="10":虚线偏移量 -->
g标签: 将多个svg定义为一个组
<g id="index">xxx</g>
(2) path路径(重点)
下面的命令可用于路径数据：
- M = move to 移动
- L = line to 连线
- H = horizontal line to ⽔平连线
- V = vertical line to 垂直连线
- C = curve to 曲线
- S = smooth curve to
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curve to
- A = elliptical Arc
- Z = closepath 闭合
注意： 以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
1. 直线
M为起始点,具体步骤如下图所示,最后可用Z来闭合
代码如下
<svg width="200" height="200" style="border: 1px solid red">
<path
d="M10 10 L20 20 H100 V100 H10 Z"
style="stroke: red; stroke-width: 2; fill: blue"
></path>
</svg>
2. 曲线curve
[1] 三次曲线:C指令
\
代码如下
<svg width="200" height="200" style="border: 2px solid red">
<path d="M20 20 L30 180 L160 30 L180 150" style="stroke:blue;stroke-width:2;fill:none" />
<!-- curve to曲线: C+三点坐标-->
<path d="M20 20 C30 180 160 30 180 150" style="stroke:green;stroke-width:2;fill:none" />
</svg>
[2]二次曲线/贝塞尔曲线:Q指令
\
代码如下
<svg width="200" height="200" style="border: 2px solid red">
<path d="M20 180 L120 20 L160 120" style="stroke: blue; stroke-width: 2; fill: none" />
<!-- 贝塞尔曲线 Q+两个点坐标 -->
<path d="M20 180 Q120 20 160 120" style="stroke: green; stroke-width: 2; fill: none" />
</svg>
[3] 弧线:A
A 1.cx 2.cy 3.旋转(顺时针,0不旋转) 4.长边短边(1长,0短) 5.起点到终点时针(0逆时针,1顺时针) 6.终点x 7.终点y
代码如下
<svg width="200" height="200" style="border: 2px solid red">
<circle cx="100" cy="100" r="2"/>
<circle cx="120" cy="110" r="2"/>
<!-- A1.cx 2.cy 3.旋转(顺时针,0不旋转) 4.长边短边(1长,0短) 5.起点到终点时针(0逆时针,1顺时针) 6.终点x 7.终点y-->
<path d="M100 100 A60 30 0 1 0 120 110" style="stroke: red;stroke-width:2;fill:none"/>
<path d="M100 100 A30 30 0 1 0 120 110" style="stroke: blue;stroke-width:2;fill:none"/>
</svg>
三. 属性
可写在style内
(1) 静态属性
- stroke: 线轮廓颜色
- stroke-width: 线轮廓厚度
- stroke-opacity: 透明度
- stroke-dasharray: 虚线形式
- troke-dashoffset: 虚线偏移量
案例在静态处
(2) 动态属性
transform: 内含平移,缩放,旋转
<svg
style="background-color: yellow"
width="500px"
height="500px"
viewBox="0 0 100 100"
>
<!-- 平移:translate(x,y) | 内填平移后坐标-->
<!-- <rect x="10" y="10" width="20" height="10" transform="translate(-10,0)" /> -->
<!--缩放: 缩放中心默认左上角 scale(x) | 内填缩放倍数-->
<!-- 角度变换:rotate(x) 内填角度-->
<rect
x="10"
y="10"
width="20"
height="10"
style="transform-box: fill-box; transform-origin: center"
transform="scale(1.5)rotate(45)"
/>
</svg>
(3) viewbox
svg中有一个viewbox属性，中文翻译为视区，就是在svg上截取一小块，放大到整个svg显示。
设置svg的viewbox属性：
<svg width="300" height="300" style="border: 1px solid steelblue"
viewbox="105 55 60 60">
<rect x="10" y="10" width="200" height="100" fill="skyblue"></rect>
</svg>
上面设置的viewbox的值为：105 55 60 60，每个参数的含义如下：
105 表示相对于svg左上角的横坐标。
55 表示相对于svg左上角的纵坐标。
60 表示截取的视区的宽度。
60 表示截取的视区的高度。
下方矩形的width和height无px单位, 原因是基于viewbox的大小
四. 动画
/* animation: name duration time-function(默认ease) delay iteration-count (默认一次) direction*/
animation: 名字 持续时间 持续时间分布函数(默认ease) 延时 持续几次(默认一次) 动画执行方式(normal,alternate)
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
#r1{
animation:move 1s ease 1s infinite alternate
}
/* 关键帧keyframes */
@keyframes move{
0%{transform:scale(1)}
100%{transform:scale(1.5);x:40;fill:red}
}
</style>
<body>
<svg
width="500px"
height="500px"
viewBox="0 0 100 100"
style="background: yellow"
>
<rect id="r1" x="10" y="10" width="20" height="10"/>
</svg>
</body>
</html>
