30.标签实现动画

SVG的<set>标签是一个非常有用的工具，它允许开发者在SVG图形中创建简单的动画效果。这个标签主要用于在一段时间内改变一个属性到一个新值。以下是关于如何使用<set>标签的一些详细说明和示例。

`<set>`标签的基本用法

<set>标签用于在SVG动画中设置元素属性的值。它可以定义动画的开始时间（begin属性），结束时间（end属性），以及动画的目标值（to属性）。

基本语法:

<set attributeName="attribute" to="value" begin="time" end="time" />

使用场景

当你想要在没有过渡效果的情况下改变属性值。
当动画涉及非数值属性，如颜色或可见性。
在创建步骤动画或触发其他动画事件时。

示例

示例 1: 改变颜色

在这个例子中，我们将在5秒后改变一个圆的填充颜色。

<!-- SVG 元素 -->
<svg width="100" height="100">
  <!-- 圆形 -->
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="blue">
    <!-- 动画 -->
    <set attributeName="fill" to="red" begin="5s" />
  </circle>
</svg>

在这里插入图片描述

示例 2: 改变透明度

这个例子展示了如何在3秒后将一个矩形的透明度从完全不透明变为半透明。

<!-- SVG 元素 -->
<svg width="200" height="200">
  <!-- 矩形 -->
  <rect width="100%" height="100%" fill="green">
    <!-- 动画 -->
    <set attributeName="opacity" to="0.5" begin="3s" />
  </rect>
</svg>

在这里插入图片描述

示例 3: 改变位置

在这个例子中，我们将在3秒后改变一个文本元素的位置。

<!-- SVG 元素 -->
<svg width="200" height="200">
  <!-- 文本 -->
  <text x="10" y="20" font-family="Verdana" font-size="20" fill="blue">
    Hello, SVG!
    <!-- 动画 -->
    <set attributeName="x" to="100" begin="3s" />
  </text>
</svg>

在这里插入图片描述

示例 4: 改变大小

这个例子展示了如何在7秒后改变一个椭圆的宽度。

<!-- SVG 元素 -->
<svg width="300" height="200">
  <!-- 椭圆 -->
  <ellipse cx="150" cy="100" rx="80" ry="50" style="fill:yellow;stroke:purple;stroke-width:2">
    <!-- 动画 -->
    <set attributeName="rx" to="150" begin="2s" />
  </ellipse>
</svg>

在这里插入图片描述

示例 5: 触发其他动画

在这个例子中，<set>标签被用来在2秒后触发另一个动画。

<!-- SVG 元素 -->
<svg width="200" height="200">
  <!-- 圆形 -->
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue">
    <!-- 触发动画 -->
    <set attributeName="fill" to="lime" begin="2s" />
    <!-- 另一个动画 -->
    <animate attributeName="r" from="40" to="10" begin="set1.end" dur="2s" fill="freeze" />
  </circle>
</svg>