SVG 元素介绍

SVG（可缩放矢量图形）是一种用于定义二维图形和动画的XML标记语言。SVG 元素是SVG动画中的一部分，用于定义对象的运动路径和动画效果。

概述

元素可以与其他SVG元素（如、）一起使用，以创建各种动画效果。它通过沿着一条路径或在一个区域内平移对象来实现动画。

语法

以下是元素的基本语法：

<animateMotion
  xlink:href="#object_id"
  dur="duration"
  repeatCount="number_of_repeats"
  path="M x1 y1 L x2 y2 ..."
  rotate="auto|auto-reverse|number"
  keyPoints="0;1"
  keyTimes="0;1"
  calcMode="linear|paced|spline"
/>

• xlink:href：指定要应用动画的对象的ID。
• dur：指定动画的持续时间。可以使用秒（s）或毫秒（ms）为单位。
• repeatCount：指定动画的重复次数。可以使用数字（如2、3）或特殊值"indefinite"表示无限次重复。
• path：定义对象的运动路径。路径由一系列的坐标点（M x1 y1 L x2 y2 ...）组成。
• rotate：定义对象是否随着运动路径旋转。
• keyPoints：定义动画关键点的位置。可以使用百分比（如0%、50%、100%）或值（如0、1）表示。
• keyTimes：定义关键点的时间。可以使用百分比（如0%、50%、100%）或值（如0、1）表示。
• calcMode：定义动画计算模式，即动画如何沿着路径进行计算。

注意：以上属性只是元素的一部分。还可以使用其他属性进行更高级的控制和动画效果。

示例

以下是一个使用元素创建动画效果的示例：

<svg width="400" height="400">
  <circle id="myCircle" cx="200" cy="200" r="20" fill="blue" />
  
  <animateMotion
    xlink:href="#myCircle"
    dur="3s"
    repeatCount="indefinite"
    path="M 100 100 L 300 100 L 300 300 L 100 300 Z"
    rotate="auto"
    calcMode="linear"
  />
</svg>

本示例中，一个蓝色圆圈沿着一个矩形路径移动，并且通过设置rotate="auto"属性来使其沿着路径旋转。动画的持续时间为3秒，无限循环。

以上是SVG 元素的介绍。通过使用该元素，您可以为SVG图形创建各种动画效果，使您的应用程序更加生动有趣。