svg标签
svg使用xml格式的标签来绘制图形
svg使用方式
内联
直接在html中写svg标签
优点：全 CSS/JS 控制、可交互
缺点：HTML 体积大、难缓存
场景：图标系统、图表、交互动效
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<svg width="400" height="240">
<rect x="0" y="0" width="100" height="50" />
</svg>
</body>
</html>使用img元素
将一个svg文件的路径，赋值给img的src
优点：简单、可缓存
缺点：内部 DOM 不可见、不能改色/绑事件
场景： 静态装饰图
<img src="./index.svg" />object元素
将一个svg文件的路径，赋值给object的data，这种用法比较少见
优点：独立文档、内部 JS 可跑
缺点：跨域受限、父页 CSS 难穿透
场景：独立复杂图形
<object data="./index.svg" />css背景
优点：排布方便
缺点：无 DOM、无无障碍
场景：纹理、装饰
<style>
.box {
width: 300px;
height: 200px;
background: url(./index.svg) no-repeat;
}
</style>
<body>
<div class="box"></div>
</body>svg坐标系
svg坐标系的原点在左上角，x轴向右，y轴向下
svg标签属性
width和height
svg标签的默认宽高是300px*150px，一般我们会自定义宽高
<svg width="500" height="300">
<rect width="100" height="50" x="25" y="25" rx="50"></rect>
</svg>viewBox
核心属性，定义内部坐标系和可见区域，一共需要四个值，每个值用空格隔开
当设置了viewBox时，svg里面元素的各种尺寸就不是px单位了，而是比例，相对于veiwBox的width和height
<svg viewBox="min-x min-y width height">- min-x：坐标系原点的X坐标，相对于svg元素的原点
- min-y：坐标系原点的Y坐标，相对于svg元素的原点
- width：相对宽度
- height：相对高度
viewBox控制svg内部坐标系的位置和尺寸，当没有设置width和height时，整个svg会充满整个浏览器视口
<svg viewBox="0 0 100 100">
<rect width="50" height="50" x="0" y="0" />
</svg>viewBox的width和height的单位并不是px，而是一个相对单位，具体是什么单位，可以不用理会
比如上面width和height设置的都是100，我们可以说宽高是100个单位
那么rect的宽高是50，也就是50个单位，所以这个矩形会占svg宽高的一半
大概是这样
当svg元素设置了width和height时，viewBox会按照svg的width和height等比缩放
<svg viewBox="0 0 100 100" width="500" height="500">
<rect width="50" height="50" x="0" y="0" />
</svg>此时svg设置了宽高为500，那么整个svg的宽高就是500px
此时viewBox的100 100就代表这，把这500px按照100份来分
所以这个矩形的宽高是(500/100)*50，也就是250px
再来说x和y，上面x和y都是0，所以svg视口的坐标原点和svg元素的坐标原点是在同一位置，都是左上角(0, 0)
给x、y改个值
<svg viewBox="10 10 100 100" width="500" height="500">
<rect width="50" height="50" x="0" y="0" />
</svg>
此时会发现矩形的位置移动到左上角了，viewBox的xy代表者，可视区域处于svg的什么位置