SVG进阶

背景

日常工作中使用SVG语法实现了部分图形的绘制，包含一些简单的图标，以及复杂的甘特图、里程碑等。过程中也遇到一些特殊的需求与问题。现针对相关的知识点进行进一步梳理总结，加深印象并方便查看。

SVG动画

• <animate></animate>
  用来放在一个形状元素的内部，定义该元素的某个属性如何根据时间变化。在指定持续时间内，属性从开始值变成结束值。

<!-- 简单例子 -->
<svg>
  <rect width="100" height="100" fill="orange">
    <animate attributeName="rx" values="0;50,0" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

- 常用时间属性 - begin：动画何时开始 - dur：动画持续时间 - end：动画何时结束 - repeatCount：动画发生的次数；取值：number | indefinite - repeatDur：重复动画的总持续时间 - 常用取值属性 - values：可以定义在动画执行过程中使用的值序列，或者是颜色矩阵的数字列表 - keyTimes：是一个以分号分割的时间值列表，用于控制动画的执行步骤。每个值与values中的值一一对应，定义了values中的值在动画中执行的时机，keyTimes中每个值都是指定在[0-1]之间的浮点数，表示动画的完成时间。例如：`keyTimes="0;0.25;0.5;0.75;1" values="10;60;110;60;10"` - from：定义被修改的属性的初始值 - to：定义被修改属性的结束值 - 其他常用属性 - attributeName{% inlineimage https://fastly.jsdelivr.net/gh/hfg-gmuend/openmoji/color/svg/1F383.svg %}：定义在动画中，父元素需要被改变的属性名 - accumulate：控制是否累加 - 综合运用

<!-- 实现一个闪烁的定位图标 -->
<svg width="50" height="50">
  <path d="M5 20 C5 0 35 0 35 20 Q35 25 20 50 Q5 25 5 20">
    <animate attributeName="fill" values="#fff;#1890ff;#fff" dur="2s" begin="0" repeatCount="indefinite" />
  </path>
  <circle cx="20" cy="20" r="8" fill="transparent" stroke="#fff" stroke-width="3">
</svg>

SVG文本分行

• <tspan></tspan>
  可以调整文本和字体的属性以及当前文本的位置、绝对或相对坐标值。

<svg width="50" height="50">
  <text x="20" y="20">
    <tspan x="10">第一行内容</tspan>
    <tspan x="10" dy="20">第二行内容</tspan>
  </text>
</svg>

SVG路径进阶

• <path></path>
  基本属性及使用方法已在第一篇大致梳理，现针对 d 属性进行详细介绍

0. 注意：后续命令字母区分大小写，区别在于：h大写后涉及的均为绝对位置，即坐标；小写后涉及的均为相对位置，即相对于上一个点的移动距离
1. M：move to 表示移动到该位置坐标，每一个M都表示新路径的开始
2. L：line to 表示使用直线连接到L之后的坐标，例如：M0 10 L40 10
3. H/V：horizontal lineto/vertical lineto 从当前点绘制一条水平/垂直线，等价于y/x值为零的L命令
4. Z：closepath 通过将当前子路径通过绘制一条自动的直线连接回其实点，结束当前子路径，其长度可以为零
5. C：curve to 从当前位置到位置(x, y)，绘制一条Bezier曲线。
   三次贝塞尔曲线需要定义一个点和两个控制点，因此需要设置三组坐标参数，例如：C x1 y1 x2 y2 x y，(x1, y1) 是曲线起始位置的控制点，(x2, y2)是曲线终止位置的控制点，(x, y)是曲线的终点。
   简写的贝塞尔曲线命令S：在当前位置和终点间绘制一条三次贝塞尔曲线，例如：S x2 y2 x y，终点控制点通过(x2, y2)指定，起始控制点是上一条曲线命令的终点控制点在当前位置上的反射点；若不存在上一条曲线，则其与曲线的起始点相同。
6. Q：quadratic Bezier curveto 从当前点到位置(x, y)，绘制一条二次Bezier曲线。例如：Q x1 y1 x y。仅需要一个控制点，用于控制起点和终点的曲线斜率。
   简写的贝塞尔曲线命令T：T命令前必须是一个Q或者T命令，才能达到效果。特征类似S命令。

举例如下

• {% inlineimage https://fastly.jsdelivr.net/gh/hfg-gmuend/openmoji/color/svg/1F383.svg %}直线L/V/H

<svg width="100" height="100">
  <path d="M10 10 L90 90 V 10 H 50" stroke="red" stroke-width="1">
  </path>
</svg>

• {% inlineimage https://fastly.jsdelivr.net/gh/hfg-gmuend/openmoji/color/svg/1F383.svg %}三次贝塞尔曲线C/S

<svg width="100" height="100">
  <path d="M110 90 C20 0 15 -80 40 -80 S20 80 40 80" stroke="red" stroke-width="1" fill="none">
  </path>
</svg>

• {% inlineimage https://fastly.jsdelivr.net/gh/hfg-gmuend/openmoji/color/svg/1F383.svg %}二次贝塞尔曲线Q/T

<svg width="200" height="100">
  <path d="M10 50 Q25 25 40 50 t30 0 30 0 30 0 30 0 30 0" stroke="red" stroke-width="1" fill="none">
  </path>
</svg>

待完善…

参考资料

【MDN】