SVG动画

一、SVG基础

1. 定义与特性

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，特点包括：

• 无损缩放：基于数学公式描述图形，任何缩放均不损失清晰度。
• 文本存储：图形以XML代码形式存在，可直接嵌入HTML或独立保存为.svg文件。
• 交互与动画支持：可通过CSS、JavaScript或内置标签实现动态效果。

2. 基本语法

SVG通过<svg>标签定义画布，内部使用图形元素描述内容：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">  
  <circle cx="100" cy="100" r="50" fill="blue" />  
</svg>  

• 常用图形元素：

  • <rect>（矩形）：x、y、width、height、fill。
  • <circle>（圆形）：cx、cy、r。
  • <path>（路径）：d属性定义点坐标及绘制命令（如M移动、L连线、C贝塞尔曲线）。

二、基本形状元素

1. 矩形（<rect>）

• 属性：

  • x/y：左上角坐标
  • width/height：宽高
  • rx/ry：圆角半径（若ry未指定则等于rx）
  • fill：填充色，stroke：描边色，stroke-width：描边宽度

• 示例：

  <rect x="10" y="10" width="80" height="50" rx="5" fill="blue" stroke="black" stroke-width="2"/>

2. 圆形（<circle>）

• 属性：

  • cx/cy：圆心坐标
  • r：半径

• 示例：

  <circle cx="100" cy="100" r="50" fill="red" stroke="black"/>

3. 椭圆（<ellipse>）

• 属性：

  • cx/cy：中心坐标
  • rx/ry：x轴和y轴半径

• 示例：

  <ellipse cx="150" cy="75" rx="80" ry="30" fill="green"/>

4. 直线（<line>）

• 属性：

  • x1/y1：起点坐标
  • x2/y2：终点坐标

• 示例：

  <line x1="0" y1="0" x2="200" y2="200" stroke="orange" stroke-width="3"/>

5. 折线与多边形（<polyline>、<polygon>）

• 属性：

  • points：顶点坐标序列（空格分隔，如x1,y1 x2,y2）
  • <polygon>自动闭合路径，<polyline>不闭合

• 示例：

  <polygon points="100,50 150,100 100,150 50,100" fill="yellow"/>
  <polyline points="0,40 40,40 40,80" stroke="black"/>

三、路径元素（<path>）

1. 路径命令

• 基本命令：

  • M/m：移动到点
  • L/l：画直线
  • H/V：水平/垂直线
  • Z/z：闭合路径

• 曲线命令：

  • C/c：三次贝塞尔曲线（需两个控制点）
  • S/s：简化的三次贝塞尔曲线（自动对称控制点）
  • Q/q：二次贝塞尔曲线（一个控制点）
  • T/t：简化的二次贝塞尔曲线
  • A/a：椭圆弧

• 示例：

  <path d="M10 10 L90 10 L90 90 Z" fill="none" stroke="black"/>
  <path d="M50 50 C20 80, 180 80, 150 50" stroke="blue"/>

2. 路径属性

• 关键属性：

  • d：路径定义字符串
  • pathLength：校准总路径长度（用于动画或比例控制）
• 应用场景：
  绘制复杂形状（如不规则图形、图标）或动态路径动画

四、组合与复用元素

1. 分组（<g>）

• 作用：将多个元素组合为逻辑单元，统一应用变换或样式

• 示例：

  <g fill="red" transform="rotate(45)">
    <rect x="10" y="10" width="50" height="50"/>
    <circle cx="50" cy="50" r="20"/>
  </g>

2. 定义与复用（<defs> + <use>）

• <defs>：定义可复用的图形模板
• <use>：通过href引用模板并实例化

• 示例：

  <defs>
    <circle id="dot" cx="5" cy="5" r="2"/>
  </defs>
  <use href="#dot" x="20" y="20"/>

五、高级特性

1. 图形变换

• 属性：transform支持平移（translate）、旋转（rotate）、缩放（scale）等

• 示例：

  <rect x="0" y="0" width="100" height="50" transform="rotate(30)"/>

2. 滤镜与渐变

• 滤镜（<filter>）：实现模糊、阴影等效果
• 渐变（<linearGradient>/<radialGradient>）：定义颜色渐变填充

• 示例：

  <rect fill="url(#gradient)" width="200" height="100"/>

六、交互与动画

1. 内置动画标签（SMIL）

SVG原生支持SMIL（Synchronized Multimedia Integration Language）动画标签：

• <animate>：属性过渡动画。

  <circle cx="50" cy="50" r="20">  
    <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />  
  </circle>  

  • attributeName：目标属性（如fill、opacity）。
  • from/to：起始值与结束值。
  • dur：持续时间。

• <animateTransform>：变换动画（平移、旋转、缩放）。

  <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3s" />  

• <animateMotion>：沿路径移动。

  <path id="path" d="M10,50 C20,10 40,10 50,50" />  
  <circle>  
    <animateMotion dur="4s" repeatCount="indefinite">  
      <mpath href="#path" />  
    </animateMotion>  
  </circle>  

  • 需配合<mpath>引用路径。

2. CSS动画

通过CSS的@keyframes和animation属性控制动画：

@keyframes rotate {  
  0% { transform: rotate(0deg); }  
  100% { transform: rotate(360deg); }  
}  
circle {  
  animation: rotate 3s infinite linear;  
}  

• 优势：浏览器兼容性好，支持硬件加速。

3. JavaScript交互

动态修改SVG属性或结合第三方库（如GSAP、Snap.svg）实现复杂动画：

const circle = document.getElementById('myCircle');  
circle.addEventListener('click', () => {  
  circle.setAttribute('fill', 'red');  
});  

• GSAP示例：

  gsap.to("#path", { morphSVG: "#newPath", duration: 2 });  

  • 支持路径变形、复杂时间线控制。

七、优化与建议

1. 复合动画效果

• 路径动画+颜色渐变：结合<animateMotion>与<animate>实现沿路径移动并变色。
• 交互触发：通过begin="click"或JavaScript事件控制动画播放。

2. 性能优化建议

• 减少DOM元素：用<path>代替多个<rect>或<circle>，减少渲染负担。
• 硬件加速：对频繁动画的元素启用transform: translateZ(0)。
• 批处理更新：使用requestAnimationFrame避免频繁重绘。

3. 工具与库推荐

• Snap.svg：轻量级SVG操作库，适合路径处理。
• Lazy Line Painter：专用于路径绘制动画。
• SVG Path Morph：路径变形库，支持平滑过渡。