这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天

本章作用：由于写组件库时组件用到svg相关内容，通过这篇文章进行一个知识整合以便日后复盘项目时查阅。

SVG-用于描述二维的矢量图形，基于 XML 的标记语言

• rect 绘制矩形 <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

x: 距离左上角的X轴位置
y: 距离左上角的Y轴位置
width: 矩形的宽度
height: 矩形的高度
rx: 圆角x 方位的半径
ry: 圆角y方位的半径

• circle 绘制圆形 <circle cx="25" cy="75" r="20"/>

cx 圆心x轴的位置
cy 圆形y轴的位置
r 圆形的半径

• Ellipse 绘制椭圆 <ellipse cx="75" cy="75" rx="20" ry="5"/>

rx 椭圆的x半径
ty 椭圆的y半径
cx 椭圆的中心x位置
cy 椭圆的中心y位置

• line 绘制直线 <line x1="10" x2="50" y1="110" y2="150"/>

x1 起点的x位置
y1 起点的y位置
x2 终点的x位置
y2 终点的y位置
直线是有两个点构成的 所以只需要确定两个点的位置即可

path 绘制路径

 <path
   d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z">
 </path>

path是SVG基本形状中功能最强大的一个 可以用来创建直线 折线等图像 不同的是path路径可以用更少的点来表示类似的效果 比如你要绘制弧形 用折线的话 你需要大量的点的才能表现出平滑的效果 path只需要少量的点

path元素形状是通过属性d定义的 d 可以理解成一个命令+参数的形式

• 直线命令

指令是 ‘Move to’ 直线需要两个点来表示 使用M命令 只会移动画笔 不会在两个点之间进行连线

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10"/>
  <circle cx="10" cy="10" r="2" fill="red"/>
</svg>

• Line to: 需要两个参数 即终点的坐标位置

L x y 或 l dx dy

• H V： H 绘制水平线 V 绘制垂直线 这两个命令只带一个参数 表示要移动到的位置

H x 或 h dx
V y 或 h dy

• 曲线命令：贝塞尔曲线 三次贝塞尔曲线 二次贝塞尔曲线 在我自己平时业务里很少使用，所以不过多写。

填充和边框

fill 填充内部背景色
stroke 绘制线条的颜色
fill-opacity 内部填充背景色的透明度数
stroke-opacity 边条颜色的透明度
stroke-width 线条的宽度

stroke-linecap 描述线条边的形状：

butt 用垂直直边结束线段
square 和butt差不多 不同的是 square会超出实际范围 超出的范围是由stroke-width来决定的
round 边框是圆角的 圆角的大小是由stroke-width 来决定的

stroke-dasharray 将虚线描述在线边上