什么是SVG
- SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
- 它使用 XML 格式定义图像。
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
- SVG 是万维网联盟的标准。
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
总的来说，SVG就是一个由XML定义的一个文件，由于是矢量图形，所以它的图形质量非常高。
SVG的基本形状
矩形 rect
- width: 矩形的宽度
- height: 矩形的高度
- style: 矩形的样式
- fill: 填充颜色
- stroke-width: 边框宽度
- stroke: 边框颜色
- rx: 圆角半径
- ry: 圆角半径
圆形 circle
- cx: 圆心的x坐标
- cy: 圆心的y坐标
- r: 圆的半径
椭圆 ellipse
- cx: 椭圆中心的x坐标
- cy: 椭圆中心的y坐标
- rx: 椭圆的x半径
- ry: 椭圆的y半径
线条 line
- x1: 线条起点x坐标
- y1: 线条起点y坐标
- x2: 线条终点x坐标
- y2: 线条终点y坐标
多边形 polygon
- points: 多边形顶点坐标
- points第一个坐标为多边形起点坐标，后续坐标为多边形顶点坐标 第一个值是x坐标，第二个值是y坐标
折线 polyline
- points: 折线顶点坐标
- points第一个坐标为折线起点坐标，后续坐标为折线顶点坐标 第一个值是x坐标，第二个值是y坐标
polygon与polyline的区别
- polygon：用于创建包含至少三个边的图形，形状是封闭的
- polyline：用于绘制多段线，形状是开放的，起点和终点不会自动连接
SVG的渲染效果-纵向线性渐变 linearGradient
- x1: 渐变起始点x坐标
- y1: 渐变起始点y坐标
- x2: 渐变结束点x坐标
- y2: 渐变结束点y坐标
- cx: 渐变中心x坐标
- cy: 渐变中心y坐标
如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
SVG的渲染效果-横向线性渐变 linearGradient
SVG的渲染效果-放射渐变 radialGradient
- fx：渐变起始点x坐标
- fy：渐变起始点y坐标
SVG应用--进度条
- stroke-dasharray: 渐变线段长度 间隔长度
- stroke-linecap: 圆角
- 第一个值：(deg / 360) * (2 * π * r)
- 第二个值：2 * π * r
- 因为默认是从 90 度的位置开始的, 我们希望从 0 度开始, 所以我们让图形旋转 -90 度
- transform="rotate(-90 100 100)"
- text-anchor="middle" 文字居中
- text-anchor属性: start | middle | end
- dy="5" 文字向下偏移 5 像素
stroke-dasharray为一个参数时: 其实是表示虚线长度和每段虚线之间的间距如:stroke-dasharray='10'表示:虚线长10，间距10，然后重复 虚线长10，间距10 两个参数或者多个参数时:一个表示长度，一个表示间距如:stroke-dasharray='10,5'表示:虚线长10，间距5，然后重复 虚线长10，间距5如:stroke-dasharray ='20,10,5'表示:虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环
SVG应用--进度条
path：定义路径数据，用于绘制路径。路径数据由一系列命令和参数组成，每个命令由一个字母表示，后跟一个或多个参数。 例如，
- M表示移动到指定位置，
- L表示绘制直线到指定位置，
- C表示绘制贝塞尔曲线到指定位置，
- Z表示关闭路径，即从当前点绘制一条直线到路径的起点，形成一个闭合的图形。
- Q表示绘制二次贝塞尔曲线到指定位置，T表示绘制平滑的二次贝塞尔曲线到指定位置，
- A表示绘制椭圆弧线到指定位置等。
其他
svg编辑器：svg.wxeditor.com/
svg文档
