深入浅析HTML5中的SVG

什么是SVG

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的标记语言，用于描述二维的矢量图形。与位图不同，SVG 图形是矢量图形，它可以通过数学公式来描述图形中的各种元素，因此可以无损放大或缩小而不失真，这使得 SVG 成为制作图标、图表和动画等多媒体元素的理想选择。

SVG 的基本语法

在 HTML5 中，我们可以通过 <svg> 元素来插入 SVG 图形，常见的用法如下：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="#F00"/>
</svg>

上述代码将会生成一个半径为 50，中心坐标为 x=100，y=100 的圆形，并填充为红色。

<svg> 元素支持大多数 HTML 属性（如 width、height、class、id 等），上述代码中的 width 和 height 分别指定 SVG 图形的宽度和高度。<circle> 元素则表示圆形，其中的 cx、cy 和 r 分别表示圆心的 x 和 y 坐标以及圆形的半径。fill 属性用来填充圆形的颜色。

SVG 中常见的图形元素

除了 <circle> 元素之外，SVG 还提供了许多常见的图形元素，包括线、矩形、椭圆等。下面列出了一些常见的 SVG 图形元素及其属性，以便进行参考。

线段

使用 <line> 元素来表示线段：

<svg width="200" height="200">
  <line x1="0" y1="0" x2="200" y2="200" stroke="#000" stroke-width="2"/>
</svg>

<line> 元素有四个属性：x1、y1、x2 和 y2 用来指定开始坐标和结束坐标，stroke 用来指定线段的颜色，stroke-width 用来指定线段的宽度。

矩形

使用 <rect> 元素来表示矩形：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="#F00"/>
</svg>

<rect> 元素有四个属性：x、y 表示矩形的左上角坐标，width 和 height 表示矩形的宽度和高度，fill 表示矩形的颜色。

椭圆

使用 <ellipse> 元素来表示椭圆：

<svg width="200" height="200">
  <ellipse cx="100" cy="100" rx="50" ry="25" fill="#F00"/>
</svg>

<ellipse> 元素有四个属性：cx、cy 表示椭圆的中心点坐标，rx、ry 表示椭圆的水平半径和垂直半径，fill 表示椭圆的颜色。

SVG 中的变换操作

除了基本的图形元素之外，SVG 还支持一些变换操作，常见的变换操作包括平移、缩放、旋转、倾斜等。下面是一些常见的变换操作的示例：

平移操作

使用 <g> 元素来对 SVG 图形元素进行分组，并通过 transform 属性对分组后的图形元素进行统一的变换操作：

<svg width="200" height="200">
  <g transform="translate(50,50)">
    <rect x="0" y="0" width="100" height="100" fill="#F00"/>
  </g>
  <rect x="0" y="0" width="100" height="100" fill="#0F0"/>
</svg>

上述代码中，使用 <g> 元素将红色矩形进行了平移操作，向右下方平移了 (50,50) 的距离。

缩放操作

使用 scale 属性来对 SVG 图形元素进行缩放操作：

<svg width="200" height="200">
  <rect x="0" y="0" width="100" height="100" fill="#F00" transform="scale(1.5,1.5)"/>
</svg>

上述代码中，使用 transform 属性对红色矩形进行了缩放操作，横向和纵向分别进行了 1.5 倍的缩放操作。

旋转操作

使用 rotate 属性来对 SVG 图形元素进行旋转操作：

<svg width="200" height="200">
  <rect x="0" y="0" width="100" height="100" fill="#F00" transform="rotate(45,50,50)"/>
</svg>

上述代码中，使用 transform 属性对红色矩形进行了旋转操作，绕着 (50,50) 的坐标点逆时针旋转了 45 度的角度。

SVG 中的动画效果

SVG 还支持一些动画效果，比如淡入淡出、旋转、平移等，在这里我们将介绍如何通过 SVG 实现一个简单的旋转动画效果。首先，我们需要定义一个表示飞镖的 SVG 图形：

<svg width="400" height="400">
  <rect x="0" y="0" width="10" height="100" fill="#0F0" transform="rotate(45,5,50)"/>
  <rect x="0" y="0" width="150" height="10" fill="#0F0"/>
</svg>

上述代码中，使用两个绿色的矩形组成了一个飞镖的形状，其中第一个矩形通过 transform 属性进行了旋转操作，绕着 (5,50) 的坐标点逆时针旋转了 45 度的角度。

接下来，我们需要使用 CSS3 的动画效果来实现一个简单的旋转动画。代码如下：

<style>
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  svg {
    animation: spin 2s linear infinite;
  }
</style>
<svg width="400" height="400">
  <rect x="0" y="0" width="10" height="100" fill="#0F0" transform="rotate(45,5,50)"/>
  <rect x="0" y="0" width="150" height="10" fill="#0F0"/>
</svg>

上述代码中，我们定义了一个名为 spin 的旋转动画，通过 transform 属性将 SVG 图形进行旋转，最后通过 animation 属性将动画效果应用到 SVG 元素上。

这样，在浏览器中打开代码后，将看到一个旋转的飞镖图形。

总结

本文介绍了 SVG 在 HTML5 中的基本用法，包括 SVG 的基本语法、常见的图形元素以及变换操作和动画效果。通过学习本文，读者将了解到如何使用 SVG 制作出各种矢量图形和动画效果。