SVG图形与动画详解：属性、渐变和动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/wangjianghao1017/article/details/128389682

本文介绍了SVG与Canvas的区别，并详细探讨了SVG的特性，包括阴影效果、线性和径向渐变的设定，以及SVG动画的实现，如<animate>、<animateTransform>和<animateMotion>的应用，展示了SVG在图形和动画方面的强大能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SVG 与 Canvas 两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

svg阴影

<defs>元素中定义的图形元素不会直接呈现。可以在视图的任何地方利用<use>元素呈现这些元素
<filter>不能直接呈现。可以利用目标svg元素上的filter属性引用一个滤镜
<feoffset>将输入图像作为一个整体，通过dx和dy定义一个偏移量
<feblend>滤镜把两个对象合在一起
<feGaussianBlur>可以对输入的图像进行高斯模糊，并通过stdDeviation指定偏移量
<feColorMatrix>基于转换矩阵对颜色的转变

svg渐变

svg线性渐变<linearGradient>参数：x1渐变开始x轴位置，y1渐变开始y轴位置，x2渐变结束x轴位置，y2渐变结束y轴位置
svg径向渐变<radialGradient>参数：cx中心点x轴，cy中心点y轴，r半径，fx径向渐变焦点x轴，fy径向渐变焦点y轴，fr径向渐变焦点的半径

SVG 线性渐变：<linearGradient>

<linearGradient> 元素用来定义线性渐变，用于图形元素的填充或描边。

参数	说明
x1	渐变开始的 x 轴位置。
x2	渐变结束的 x 轴位置。
y1	渐变开始的 y 轴位置。
y2	渐变结束的 y 轴位置。

线性渐变可以定义为水平、垂直或径向渐变：

- 当 y1 和 y2 相等且 x1 和 x2 不同时，将创建水平渐变。
- 当 x1 和 x2 相等且 y1 和 y2 不同时，将创建垂直渐变。
- 当 x1 和 x2 不同且 y1 和 y2 不同时，将创建径向渐变。

一个渐变上的颜色坡度，是用 **<stop>** 元素定义的。

参数	说明
offset	定义渐变开始/停止时的位置。
stop-color	定义渐变开始/停止时使用的颜色。
stop-opacity	定义渐变开始/停止时指定颜色的不透明度。

.svg动画

<animate>动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时间点改变。在指定持续时间里，属性从开始值变成结束值
<animateTransform>变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切
<animateMotion>定义了一个元素如何沿着运动路径进行移动

标记	说明
<animate>	动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时间点改变。在指定持续时间里，属性从开始值变成结束值。
<animateTransform>	变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。
<animateMotion>	定义了一个元素如何沿着运动路径进行移动。

SVG动画常用属性

属性	作用	值
attributeName	标识了在一个动画动作环节中，父元素需要被改变的属性名。
from	svg 动画发生过程中被修改的属性的初始值。
to	svg 动画发生过程中被修改的属性的最终值。
dur	标识了动画的简单持续时间。
fill	在动画结束后，是否还要保持该动画。	`remove`：在动画的激活持续时间结束后，动画效果会移除。这是默认值。 `freeze`：在动画的激活持续时间结束后，动画效果会“冻结”着，直到文档持续时间结束或动画重新开始。
repeatCount	动画重复执行次数。
repeatDur	动画重复执行总时长。
begin	规定动画开始的时间。	`1s`：1s 后开始执行动画。 `click`：click 触发事件执行后再执行动画。 `click + 2s`：click 触发事件执行后，等两秒再执行动画。
restart	规定元素开始动画后，是否可以被重新开始执行。	`always`：动画可以在任何时候被重置。这是默认值。 `whenNotActive`：只有在动画没有被激活的时候才能被重置，例如在动画结束之后才能再执行。 `never`：在整个 SVG 执行的过程中，元素动画不能被重置。
calcMode	规定每一个动画片段的动画表现。	`linear`：匀速动画，这是默认值。 `discrete`：非连续动画，没有动画效果瞬间完成。 `paced`：规定整个动画效果始终以相同的速度进行，设置 keyTimes 属性无效。 `spline`：配合 keySplines 属性来定义各个动画过渡效，自定义动画。
keyTimes	划分动画时间片段。	0~1。
values	划分对应取值片段的值。