svg
svg属性
<svg viewBox="0 0 200 200"></svg>
// viewBox 属性定义了在 SVG 坐标系中如何定位和缩放 SVG 内容。它包含四个值：min-x, min-y, width, height，这些值定义了一个矩形区域，该区域内的 SVG 内容将被映射到视口上。通过改变 viewBox 的值，可以调整 SVG 图像在视口中的显示位置和缩放比例。
// 就像canvas绘制图像一样，只把在这个规定区域内的图像展示出来。
<svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet"></svg>
// preserveAspectRatio 是设置图像在宽高和视口不匹配的时候如何显示， 他有两个参数 align 和 meetOrSlice 。
// align 取值： xMinYMin、xMidYMin、xMaxYMin... 等
// meetOrSlice取值：meet(适应画面，显示完整图像) slice（裁剪画面，充满整个视口）
首先是基础图形
<svg version="1.0" width="500" height="500" style="border:1px solid black;">
<!-- 通用属性： stroke 边线颜色； stroke-width 边线宽； fill 填充颜色 -->
<!--
【矩形】
rect
基本属性： x y 起始位置 单位是像素； rx ry 横向和纵向圆角 单位像素； width height 宽高
-->
<rect x="5" y="5" width="60" height="79" fill="orange" stroke="#ff00ff" stroke-width="3" />
<rect x="85" y="5" width="40" height="90" rx="5" ry="10" fill="transparent" stroke="#0ff" stroke-width="1" />
<!--
【圆形】
circle
基本属性： cx cy 圆心位置； r 圆半径
-->
<circle cx="155" cy="30" r="20" fill="#fef908" stroke-width="0" />
<!--
【线条】
line
基本属性： x1 y1 点1坐标； x2 y2 点2坐标。
-->
<line x1="195" y1="10" x2="205" y2="65" stroke="red" stroke-width="3" />
<!--
【折线】
polyline
基本属性： points 一组一组的点，用逗号 , 分割。例如：points="15 20, 35 40, 12 16"
-->
<polyline points="15 20, 25 40, 37 59, 24 46, 58 59" stroke="blue" stroke-width="2" fill="transparent" />
<!--
【多边形】
polygon
基本属性： points 一组一组的点，用逗号 , 分割。与polyline不同的地方是，polygon是闭合的图形，而polyline只是线
-->
<polygon points="120 180,360 250, 190 42,450 300" stroke-width="0" fill="gray" />
</svg>
以上代码效果如下：
image.png
文字
<svg width="200" height="200" style="border: 1px solid black;">
<!--
【文本】
Text; 此外还有 tspan 标签，他的属性同text，（唯一一点注意的是tspan只能作为text或tspan的子标签）
基本属性： x y 绘制文本的开始坐标;
dx dy 字体偏移，可以是数组（数组的时候会按顺序设置每个字的便宜，剩下的字以最后一项的值偏移）
rotate 把所有字旋转角度，如果是数组，则按顺序挨个旋转指定值
textLength 强制把字符分散到指定长度
此外还有一些类似于css font的属性，如下：
font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration
-->
<text x="0" y="40" font-weight="bold" font-size="34" stroke-width="1" stroke="red" fill="blue">超级兔子</text>
<text x="0" y="60" textLength="120">文字</text>
<text x="0" y="80" textLength="120">这里是分散长度的文字</text>
<!--
【引用文本】
tref; tref标签必须得是text的子标签
基本属性： xlink:href 引用指定id的text里的文字
【绘制不出来，应该是浏览器不支持】
-->
<text id="be_refed" x="0" y="140">被引用的文字</text>
<text x="0" y="150" fill="red" font-size="16" font-weight="bold">
<tref xlink:href="#be_refed" />
</text>
<!--
【路径文字】
textPath textPath 标签 必须得是text的子标签。textPath的意思是让文字跟着路径走
基本属性：xlink:href
【绘制不出来，应该是浏览器不支持】
-->
<circle id="wordPath" cx="20" cy="160" r="20" fill="transparent" stroke="red" />
<text>
<textPath xlink:href="#wordPath">绕圈的文字</textPath>
</text>
</svg>
文字效果如下：
image.png
Path
path是svg最复杂的标签，也是功能最强大的标签，它可以实现以上所有的图形，还包括各种不规则的图形，贝塞尔曲线，2次曲线等。
基本属性：d ; d的值需要按照一定规则书写，例如：M 10 10 ，就是移动到10 10 位置； L 20 20 , 就是从上一个点画直线到20 20；
image.png
image.png
M 10 10 移动到10 10点；
L 20 20 从当前点画直线到 点 20 20；
H 100 向右画长度为 100的水平线（负值为向左画）
V 100 向下画高度为100的垂直线（负值为向上画）
Q 15 15 200 200 ； 15 15 是控制点 200 200 是曲线的重点，这是一个二次曲线
T 200 200; T 也是绘制二次曲线，不过只有一个终点，控制点是根据前一个控制点来推断，具体推断方法是：前一个控制点根据当前起始点的中心对称点就是控制点。所以T把必须跟着Q后边才能用，跟着有效的T后边也可以用。
C 15 15 60 60 120 120； 15 15 是控制点，控制曲线射出的方向； 60 60 也是控制点，控制曲线射入的方向。120 120 是终点。这是典型的三次曲线
S 60 60 120 120; S也是三次曲线，不过第一个控制点是根据前一个曲线推断出来的，同T。
A rx ry n t d ex ey 画椭圆弧；rx x轴半径， ry y轴半径， n 椭圆的旋转角度（其实就是这个椭圆旋转了这个角度后还能落到后边的终点上），t 大弧还是小弧， d 0逆时针画 1顺时针画， ex ex 终点坐标
Z 标识路径结束，后边不跟参数
以下是几个svg的实例
<!-- 这是绘制的一个太极图 -->
<svg version="1.0" width="202" height="202">
<circle cx="100" cy="100" r="101" stroke-width="1" stroke="#000" fill="#ffffff" />
<path d="M 100 200 A 100 100 0 1 1 100 0 A 50 50 0 1 1 100 100 A 50 50 0 1 0 100 200 Z " fill="#000000" />
<circle cx="95" cy="50" r="10" fill="#ffffff" />
<circle cx="95" cy="150" r="10" fill="#000000" />
</svg>
<svg version="1.0" width="202" height="202">
<circle cx="100" cy="100" r="101" stroke-width="1" stroke="#000" fill="#ffffff" />
<path d="M 100 200 A 100 100 0 1 1 100 0 A 60 60 0 1 1 100 120 A 40 40 0 1 0 100 200 Z " fill="#000000" />
<circle cx="95" cy="60" r="10" fill="#ffffff" />
<circle cx="95" cy="160" r="10" fill="#000000" />
</svg>
<!-- 兔子 -->
<svg version="1.0" width="200" height="200" style="border:1px solid black;">
<path
d="M 50 60
C -80 230 280 230 150 60
M 50 60
Q 40 45 60 0
Q 75 40 65 65
H 138
M 92 60
M 138 65
Q 123 40 143 0
Q 165 45 147 60
M 60 30
L 60 45
M 143 30
L 143 45
"
stroke-width="3" stroke="#f50dfb" fill="transparent" />
<circle cx="55" cy="95" r="10" stroke="black" stroke-width="1" fill="transparent" />
<circle cx="55" cy="95" r="4" stroke-width="0" fill="red" />
<circle cx="143" cy="95" r="10" stroke="black" stroke-width="1" fill="transparent" />
<circle cx="143" cy="95" r="4" stroke-width="0" fill="red" />
<polygon points="90 155, 110 155, 102 158, 100 175, 98 158" fill="red" />
</svg>
太极的效果图如下：
image.png
兔子效果：
这兔子太丑了~~
变换
svg的变换其实跟css的也很像，也支持translate scale skew rotate matrix等属性。大体使用方法是用一个g标签把要缩放的内容包裹起来，然后整体通过g标签缩放变换
<svg version="1.0" width="202" height="202" style="width:30px;height:30px;">
<g transform="scale(0.135)" transform-origin="0 0">
<circle cx="100" cy="100" r="101" stroke-width="1" stroke="#000" fill="#ffffff" />
<path d="M 100 200 A 100 100 0 1 1 100 0 A 60 60 0 1 1 100 120 A 40 40 0 1 0 100 200 Z " fill="#000000" />
<circle cx="95" cy="60" r="10" fill="#ffffff" />
<circle cx="95" cy="160" r="10" fill="#000000" />
</g>
</svg>
渐变
svg不仅支持纯色的描边和填充，还支持渐变的描边和填充。
不过渐变文件需要定义在defs标签内，方便其能够重复使用
<svg width="200" height="200" style="border:1px solid red;">
<defs>
<!-- 直线渐变 -->
<linearGradient id="linear" x1="0.5" y1="0.2" x2="0.9" y2="0.9">
<!-- 必须添加id，否则无法引用-->
<!-- 默认颜色方向是从左到右 ， 你可以通过x1 y1 , x2 y2 两组值来确定渐变走向，它们的取值 0-1之间-->
<stop stop-color="red" offset="0%" stop-opacity="0.6" />
<stop class="stop2" offset="50%" />
<stop stop-color="green" offset="100%" />
</linearGradient>
<!-- 径向渐变 -->
<radialGradient id="radial" cx="0.8" cy="0.8" r="0.55" fx="0.5" fy="0.5">
<!-- 径向渐变跟圆一样， 需要规定cx cy (渐变整个图形的中心点) fx fy(渐变的颜色的中心) 和r (渐变的整个图形的半径),超过这个范围的都是以结束色填充， 它们的取值范围为 0-1
理解： 这个径向渐变可以理解为一个独立的图片，它有大小位置，这个图片的大小位置由cx cy r决定。那这个图片是什么样子就由fx fy决定，fx和fy决定的是起始颜色的位置。
-->
<stop stop-color="yellow" offset="0%" />
<stop stop-color="green" offset="100%" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="100" fill="url(#linear)" />
<circle cx="100" cy="100" r="30" fill="url(#radial)" />
</svg>
以上实例的效果如下：
image.png
