可以对SVG图像中的形状进行动画处理。有几种不同的动画SVG形状的方法。在本文中，我将介绍各种可能性。

SVG动画示例

这是一个简单的SVG动画示例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="10" y="10" height="110" width="110"
         style="stroke:#ff0000; fill: #0000ff">

        <animateTransform
            attributeName="transform"
            begin="0s"
            dur="20s"
            type="rotate"
            from="0 60 60"
            to="360 60 60"
            repeatCount="indefinite"
        />
    </rect>

</svg>

请注意，元素<rect>中如何嵌套有元素<animateTransform>。正是这个元素使矩形动画化。

动画选项概述

动画是通过操纵形状随时间变化的属性来完成的。使用5个SVG动画元素中的一个或者多个完成此操作：

• <设置>
• <动画>
• <animateColor>
• <animateTransform>
• <animateMotion>

这些SVG动画元素均设置或者设置SVG形状的不同方面。这些动画元素将在本文的其余部分中进行说明。

放

set元素是SVG动画元素中最简单的元素。它只是在经过特定时间间隔后将属性设置为特定值。因此，形状不会连续进行动画处理，而只是更改属性值一次。

这是一个<set>元素示例：

<circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
    <set attributeName="r" attributeType="XML"
         to="100"
         begin="0s"  />

</circle>

注意嵌套在circle元素内的 <set>元素。这是通过将<< set>元素嵌套在要应用形状的SVG元素内的方式。

<set>元素在特定时间设置属性的值。要设置的属性名称在" attributeName"属性内指定。将其设置为的值在" to"属性中指定。设置属性值的时间在" begin"属性内指定。

上面的示例在5秒钟后将属性r设置为100。这是结果图像：

attributeType

前面的示例在元素<set>中还具有一个attributeType属性。该值设置为XML。这是因为在示例中要为其设置值的属性(" r"属性)是SVG圆元素的属性。由于SVG元素是XML元素，所以SVG属性是XML属性。

我们还可以为形状的CSS属性设置动画。如果这样做，则需要将" attributeType"设置为" CSS"。如果我们不提供" attributeType"属性，则浏览器将尝试猜测要设置动画的属性是XML属性还是CSS属性。

动画animate

" animate"元素用于为SVG形状的属性设置动画。我们可以将" animate"元素嵌套在我们想要应用的形状内。这是一个例子：

<circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">
    <animate attributeName="cx" attributeType="XML"
             from="30"  to="470"
             begin="0s" dur="5s"
             fill="remove" repeatCount="indefinite"/>

</circle>

此示例将<circle>元素的cx属性从值30(" from"属性)设置为479(" to"属性)。动画从0秒(" begin"属性开始)开始，持续时间为5秒(" dur"属性)。

动画完成后，将动画属性设置回其原始值(" fill =" remove"属性设置)。如果我们希望animationed属性保持动画的原值，请将" fill"属性设置为" freeze"。动画无限期重复(" repeatCount"属性)。

这是生成的动画：

animateTransform

" <animateTransform"元素可以对形状的" transform"属性进行动画处理。 <animate>元素不能做到这一点。

这是一个例子：

<rect x="20" y="20" width="100" height="40"
    style="stroke: #ff00ff; fill:none;" >
  <animateTransform attributeName="transform"
                    type="rotate"
                    from="0 100 100" to="360 100 100"
                    begin="0s" dur="10s"
                    repeatCount="indefinite"
          />
</rect>

这个" <animateTransform>"示例对嵌套其中的" <rect>"元素的" transform"属性进行了动画处理。 " type"属性设置为" rotate"(旋转变换函数)，这意味着动画变换将是旋转。 " from"和" to"属性将参数设置为动画并传递给" rotate"函数。本示例围绕点100,100从0度旋转到360度。

这是使正方形的比例动画化的示例：

<rect x="20" y="20" width="40" height="40"
      style="stroke: #ff00ff; fill: none;" >
    <animateTransform attributeName="transform"
                      type="scale"
                      from="1 1" to="2 3"
                      begin="0s" dur="10s"
                      repeatCount="indefinite"
            />
</rect>

再次注意，from属性和to属性包含通常作为参数传递给scale()转换函数的值。

动画运动animateMotion

<animateMotion>元素可以对形状沿路径的移动进行动画处理。它也可以旋转形状以匹配路径的坡度，就像在山上行驶的汽车一样。这是一个例子：

<rect x="0" y="0" width="30" height="15"
        style="stroke: #ff0000; fill: none;">
      <animateMotion
              path="M10,50 q60,50 100,0 q60,-50 100,0"
              begin="0s" dur="10s" repeatCount="indefinite"
              />
  </rect>

在<animateMotion>元素的path属性中指定沿矩形动画的路径。 " path"属性使用与path元素相同的语法。

这也是产生的动画，其中也显示了路径，因此我们可以更好地跟随运动。

为了旋转正方形以使其与路径的坡度对齐，请将<animateMotion>元素的旋转属性设置为自动。这是一个例子：

<rect x="0" y="0" width="30" height="15"
        style="stroke: #ff0000; fill: none;">
      <animateMotion
              path="M10,50 q60,50 100,0 q60,-50 100,0"
              begin="0s" dur="10s" repeatCount="indefinite"
              rotate="auto"
              />
  </rect>

这是生成的动画。注意正方形的旋转如何变化以适合路径。

我们还可以将"旋转"属性设置为特定值，例如20或者30等。这样可以在整个动画中使形状旋转该角度数。

时间单位

定义SVG动画时，可以指定动画的开始时间和持续时间。指定时，我们可以在不同的时间单位之间进行选择。通常在各种动画元素的"开始"，" dur"和" end"属性内指定时间单位。

在这些属性中，我们可以指定一个数字，后跟一个时间单位，如本文示例中所述。例如，" 5s"表示5秒。以下是我们可以使用的时间单位列表：

我们还可以采用包含小时，分钟和秒的时间格式来指定时间。格式如下：

hh:mm:ss

这是一个例子：

1:30:45

本示例指定1小时30分45秒的时间(对于动画来说这当然是很长的时间)。

协调动画

我们可以将一个动画的开始同步到另一个动画的结束。我们这样做是这样的：

<rect x="0" y="0" width="30" height="15"
      style="stroke: #ff0000; fill: none;">

    <animate id="one"
             attributeName="x" attributeType="XML"
             from="0" to="400"
             begin="0s" dur="10s" fill="freeze"
            />
    <animate
            attributeName="y" attributeType="XML"
            from="0" to="50"
            begin="one.end" dur="10s" fill="freeze"
            />
</rect>

这是生成的动画：

第一个动画的" id"属性设置为"一个"。

第二个动画通过其" begin"属性引用第一个动画。 " begin"属性值设置为" one.end"，这意味着该动画应在ID为" one"的动画结束时开始播放。

我们可以使用" id.begin"或者" id.end"在另一个动画开始或者结束时开始播放动画。代替id使用动画元素的ID进行同步。

我们还可以指定到另一个动画的开始或者结束时间的偏移量，如下所示：

one.begin+10s

one.end+5s

另外，我们可以在动画的end属性中指定一个明确的结束时间。这不能代替dur属性。它所做的只是在动画中添加另一个可能的结尾，因此以先发生者为准。这是一个例子：

<animate
        attributeName="y" attributeType="XML"
        from="0" to="50"
        begin="one.begin+3s" dur="10s" end="one.end"
        fill="freeze"
        />

该动画的时长为10秒，或者在ID为" one"的动画结束时停止，以先到者为准。

重复动画

我们可以在动画元素内部使用两个属性，以重复动画。

第一个属性是repeatCount属性。在此属性内，我们可以设置一个数字，该数字将重复动画该次数，或者值"不确定"，该值将使动画一直运行而不会停止。

第二个属性是" repeatDur"，它指定要重复播放动画的持续时间。我们还可以在repeatDur属性中使用值'indefinite'，其效果与在repeatCount属性中使用值相同。

这是两个示例：

<animate
        attributeName="y" attributeType="XML"
        from="0" to="50"
        begin="one.begin+3s" dur="10s"
        repeatCount="3"
        fill="freeze"
        />

<animate
        attributeName="y" attributeType="XML"
        from="0" to="50"
        begin="one.begin+3s" dur="10s"
        repeatDur="30s"
        fill="freeze"
        />

组合动画

我们可以通过在元素内列出多个 <animation>来进行动画组合，从而组合动画。我们已经看到了，但这是另一个示例：

<rect x="10" y="10" width="40" height="20"
     style="stroke: #000000; fill: none;">
   <animate attributeName="x"
            attributeType="XML"
            from="10" to="400"
            begin="0s" dur="10s"
            repeatCount="indefinite"
           />
   <animate attributeName="y"
            attributeType="XML"
            from="10" to="100"
            begin="0s" dur="10s"
            fill="freeze"
            repeatCount="indefinite"
           />
</rect>

这个例子有两个动画，每个动画为矩形的x和y属性设置动画。这是生成的动画：

当结合 <animateTransform>元素时，第二个动画的默认行为是取消第一个动画。但是，我们可以通过向两个<animateTransform>元素添加具有sum值的属性additive来组合转换动画。这是一个例子：

<rect x="10" y="10" width="40" height="20"
      style="stroke: #000000; fill: none;">
    <animateTransform attributeName="transform" attributeType="XML"
                      type="scale"
                      from="1" to="3"
                      begin="0s" dur="10s"
                      repeatCount="indefinite"
                      additive="sum"
            />
    <animateTransform attributeName="transform" attributeType="XML"
                      type="rotate"
                      from="0 30 20" to="360 30 20"
                      begin="0s" dur="10s"
                      fill="freeze"
                      repeatCount="indefinite"
                      additive="sum"
            />