HTML5之SVG 2D入门1 - SVG(可缩放矢量图形)概述

什么是SVG

SVG，全称Scalable Vector Graphics（可缩放矢量图形），是一种基于XML描述的二维图形格式。与位图（如JPEG和PNG）不同，SVG 是使用几何形状来描述图像，而不是像素阵列。这意味着 SVG 图像可以缩放到任何大小，而不会失去图像质量。

SVG基础语法

SVG 使用XML语法，图像由一系列形状（例如矩形、圆圈、路径等）组成。以下是一个简单的SVG例子：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

这个代码创建了一个宽高为100像素的SVG画布，并在中心绘制了一个红色的圆。

SVG形状和属性

SVG形状包括矩形、圆、椭圆、线、折线、路径等等。每个形状都可以有各种各样的属性来控制它们的外观和位置。例如，circle元素有cx、cy和r属性表示圆心坐标和半径。

以下是一些常用形状：

• 矩形

<rect x="0" y="0" width="100" height="100" fill="blue" />

• 圆形

<circle cx="50" cy="50" r="40" fill="red" />

• 椭圆形

<ellipse cx="60" cy="60" rx="40" ry="20" fill="green" />

• 直线

<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2" />

• 多边形

<polygon points="50,0 100,50 50,100 0,50" fill="orange" />

• 路径

<path d="M100 100 L200 100 L150 200 Z" fill="none" stroke="black" />

SVG图形描边和填充

SVG图形可以通过描边和填充来定义外观，描边和填充可以是颜色、渐变或图案等。

以下是一些常用属性：

• fill：定义形状内部的填充颜色或图案。
• fill-opacity：定义填充透明度。
• stroke：定义形状描边颜色或图案，一般与stroke-width配合使用。
• stroke-width：定义描边宽度。

以下是一个例子，展示了一个带有黄色填充和黑色描边的三角形：

<svg width="100" height="100">
  <path d="M 10 90 L 50 10 L 90 90 Z" fill="yellow" stroke="black" stroke-width="2"/>
</svg>

SVG渐变

SVG渐变可以让我们在形状内使用过渡颜色，可以是线性渐变或径向渐变。

以下是一个线性渐变的例子：

<svg width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="100" rx="80" ry="50" fill="url(#grad1)" />
</svg>

我们首先定义了一个带有两个颜色停止的线性渐变。然后我们在圆形内部使用该渐变做填充。

SVG动画

SVG支持各种动画效果，可以通过CSS动画、SMIL动画和JavaScript控制等方式实现。

以下是一个简单的CSS动画，将一个圆形从红色变成蓝色：

<svg width="120" height="120">
  <circle cx="60" cy="60" r="50">
    <animate 
      attributeName="fill" 
      values="red;blue" 
      dur="1s" 
      repeatCount="indefinite" 
    />
  </circle>
</svg>

其中，animate元素通过修改fill属性的值，实现了从红色到蓝色的渐变效果。

示例1

下面展示一个简单的SVG图表，它用圆形表示两项数据的占比，圆形的大小表示数据量的大小。其中使用渐变表示数据的颜色，使用title元素表示数据的含义。

<svg viewBox="0 0 100 100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(34,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <circle cx="30" cy="50" r="20" fill="url(#grad1)">
    <title>数据1: 60%</title>
  </circle>
  <circle cx="70" cy="50" r="40" fill="url(#grad1)">
    <title>数据2: 40%</title>
  </circle>
</svg>

示例2

下面展示一个SVG动画，它用圆形表示太阳系统的各个行星。每个行星绕太阳旋转，同时它们自转的速度也不同。其中太阳用红色的圆形表示。

<svg viewBox="0 0 400 400">
  <circle cx="200" cy="200" r="20" fill="red" />
  <g>
    <circle cx="200" cy="60" r="10" fill="#D2D2D2">
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 200 200"
                        to="360 200 60"
                        dur="10s"
                        repeatCount="indefinite" />
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 200 60"
                        to="360 200 60"
                        dur="5s"
                        repeatCount="indefinite" />
    </circle>
    <circle cx="240" cy="90" r="12" fill="#D2D2D2">
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 200 200"
                        to="360 240 90"
                        dur="15s"
                        repeatCount="indefinite" />
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 240 90"
                        to="360 240 90"
                        dur="8s"
                        repeatCount="indefinite" />
    </circle>
    <circle cx="270" cy="150" r="15" fill="#D2D2D2">
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 200 200"
                        to="360 270 150"
                        dur="20s"
                        repeatCount="indefinite" />
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 270 150"
                        to="360 270 150"
                        dur="10s"
                        repeatCount="indefinite" />
    </circle>
    <circle cx="200" cy="200" r="18" fill="#D2D2D2">
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 200 200"
                        to="360 200 200"
                        dur="25s"
                        repeatCount="indefinite" />
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 200 200"
                        to="360 200 200"
                        dur="15s"
                        repeatCount="indefinite" />
    </circle>
    <circle cx="120" cy="230" r="14" fill="#D2D2D2">
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 200 200"
                        to="360 120 230"
                        dur="30s"
                        repeatCount="indefinite" />
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 120 230"
                        to="360 120 230"
                        dur="20s"
                        repeatCount="indefinite" />
    </circle>
    <circle cx="70" cy="290" r="17" fill="#D2D2D2">
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 200 200"
                        to="360 70 290"
                        dur="35s"
                        repeatCount="indefinite" />
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 70 290"
                        to="360 70 290"
                        dur="25s"
                        repeatCount="indefinite" />
    </circle>
    <circle cx="250" cy="310" r="16" fill="#D2D2D2">
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 200 200"
                        to="360 250 310"
                        dur="40s"
                        repeatCount="indefinite" />
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 250 310"
                        to="360 250 310"
                        dur="30s"
                        repeatCount="indefinite" />
    </circle>
  </g>
</svg>

可以看到，使用SVG，我们能够轻松的创建出各种矢量图形，并可以通过CSS、JavaScript或SMIL实现各种交互和动画效果。