【html】svg标签

SVG是是用来制作矢量图的 HTML5 标签，用来定义 SVG 图形的容器。

svg属性

属性	必要	说明
xmlns=“http://www.w3.org/2000/svg”	√	直接使用，不作说明。
viewBox	√	截取的区域
fill	√	背景的颜色
stroke	√	线条的颜色
width，height	√	svg内容大小
stroke-width		线条的宽度
stroke-linecap		线条末尾的样式 (默认)butt (圆角)round (方形)square ，round 和 square 会影响线条的长度
opacity		不透明度 0~1
fill-rule		nonzero (非零环绕原则)evenodd
stroke-dasharray		创建虚线数组 x,y,z,… (长度，间隔，长度，间隔等)
stroke-dashoffset		偏移
filter		url(id) 添加滤镜

更多属性：SVG 属性参考 - SVG：可缩放矢量图形 | MDN (mozilla.org)

path标签

作为svg的子dom，在svg的viewBox上作画。

属性	必要	说明
stroke-linecap	√	线条头部形状
stroke-linejoin	√	线条拐角处形状
stroke-width	√	线条宽度
d	√	绘画命令

path绘画指令(大小写敏感。大写一般是绝对位置，小写一般是相对位置)

指令	说明
M/m (x,y)	移动当前位置
L/l (x,y)	从当前位置绘制线段到指定位置
H/h (x)	从当前位置绘制⽔平线到达指定的 x 坐标
V/v (y)	从当前位置绘制竖直线到达指定的 y 坐标
Z/z	闭合当前路径
C/c (x1,y1,x2,y2,x,y)	从当前位置绘制三次⻉塞尔曲线到指定位置
S/s (x2,y2,x,y)	从当前位置光滑绘制三次⻉塞尔曲线到指定位置
Q/q (x1,y1,x,y)	从当前位置绘制⼆次⻉塞尔曲线到指定位置
T/t (x,y)	从当前位置光滑绘制⼆次⻉塞尔曲线到指定位置
A/a (rx,ry,xr,laf,sf,x,y)	从当前位置绘制弧线到指定位置

示例

绘制叉号

<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>

绘制爱心

<svg xmlns="http://www.w3.org/2000/svg" style="height:100px;width:100px" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>