博客

前端svg实现各式图片和动画

  • Post category:other

以下是关于“前端SVG实现各式图片和动画”的完整攻略，包含两个示例说明。

什么是SVG

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它用于创建各种静态和动态图像。与像素图像不同，SVG图像可以无限缩放而不会失去清晰度SVG图像可以使用文本编辑器创建，也可以使用各种图形编辑器创建。

SVG的基本形状

SVG支持多种基本状，包括矩形、圆形、椭圆、线条、多边形和路径。以下是一个示例，展示如何使用SVG创建一个矩形：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
</svg>

在这个示例中，我们使用<svg>标签创建一个SVG画布，并设置其宽度和高度。然后，我们使用<rect>标签创建一个矩形，并其位置、大小和填充颜色。

SVG的动画

SVG还支持多种动画效果，包括平移、旋转、缩放淡入淡出。以下是一个示例，展示如何使用SVG创建一个旋转动画：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red">
    <animateTransform attributeName="transform" attributeType="XML"
      type="rotate" from="0" to="360" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

在这个示例中，我们使用<animateTransform>标签创建一个旋转动画，并将其应用于矩形。我们设置动画的属性名称为“transform”，类型为“rotate”，并将其从0度旋转到360度，持续时间为5秒，并且重复次数为无限次。

示例1：使用SVG创建一个简单的动画

以下是一个示例，展示如何使用SVG创建一个简单的动画：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="20" fill="red">
    <animate attributeName="cx" from="50" to="80" dur1s" repeatCount="indefinite" />
  </circle>
</svg>

在这个示例中，我们使用<circle>标签创建一个圆形，并设置其位置、大小和填充颜色。然后，我们使用`标签创建一个动画，并将其应用于圆形。我们设置动画的属性名称为“cx”，并将其从50像素移动到80像素，持续时间为1秒，并且重复次数为无限次。

示例2：使用SVG创建一个复杂的动画

以下是一个示例，展示如何使用SVG创建一个复杂的动画：

<svg width="200 height="200">
  <rect x="10" y="10" width="80" height="80" fill="red">
    <animateTransform attributeName="transform" attributeType="XML"
      type="rotate" from="0" to="360" dur="5s" repeatCount="indefinite" />
  </rect>
  <circle cx="100" cy="100" r="20" fill="blue">
    <animate attributeName="r" from="20" to="40" dur="2s" repeatCount="indefinite"    <animate attributeName="fill" values="blue;green;red;blue" dur="4s" repeatCount="indefinite" />
  </circle>
</svg>

在这个示例中，我们使用<rect>签创建一个矩形，并使用<animateTransform>标签创建一个旋转动画。我们还使用<circle>标签创建一个圆形，并使用<animate>标签创建一个半径变化和颜色变化的动画。我们设置圆形的半径从20像素到40像素，续时间为2秒，并且重复次数为无限次。我们还设置圆形的填充颜色从蓝色到绿色到红色再到色，持续时间为4秒，并且重复次数为无限次。

结论

SVG是一种基于XML的矢量图形格式，它可以用于创建各种静态和动态图像。SVG支持多种基本形状和动画效果，用于创建各种各样的图像和动画。我们可以使用示例来帮助我们更好地理解如何使用SVG创建图像和动。

Tags: