基础形状(Basic Shapes)

前端教程SVG

从本节开始，我们正式讲解如何绘制 SVG。

基础和自定义形状

SVG 有2种创建形状（shape）的方式：

1. 一种是使用预定义的基础形状（<line>、<rect>、<circle>、<ellipse>）；
2. 另一种是自定义形状（<polyline>、<polygon>、<path>）。

基础形状有如下特点：

1. 预定义的形状，因此简单易用
2. 然而灵活性差，只能绘制非常单调的图形

自定义形状有如下特点：

1. 自定义的形状，因此使用起来略微复杂
2. 但是灵活性超高，可以绘制任意形状，创造出非常独特的、丰富的图形

本节主要讲解基础形状的用法。

坐标系统简介

在正式绘制图形之前，我们必须先了解一下 SVG 如何定位坐标的。

计算机图形学中（包括 SVG）采用我们高中时所学的笛卡尔坐标系来绘制图形，但是略微做了调整——Y轴倒了过来，从上往下递增。

新窗口打开

INFO

CSS 中的 z-index 是三维坐标中的 Z 轴，从里往外递增。

线（<line>）

基本语法

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" stroke-width="4" />
</svg>

语法说明：

• x1, y1：表示起始点坐标
• x2, y2：表示结束点坐标
• stroke：控制线条颜色
• stroke-width：控制线条宽度

示例1

新窗口打开

示例说明：

• 左面的绿色方块中，定义了2条线，一条蓝色，一条红色
• 右面的绿色方块中，也定义了同样的2种颜色的线，不过是通过 class 来控制样式的。

TIP

SVG 是可以内嵌 CSS 代码的：

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" width="200" height="200">
  <style type="text/css">
    <!-- CSS 代码 -->
  </style>
</svg>

示例2

新窗口打开

示例说明：

• SVG 可以内嵌 JavaScript 脚本，通过 JS 代码来绘制图形。

TIP

更多 SVG 相关的 JS 代码，请参考 MDN SVGSVGElement。

SVG 是可以内嵌 JavaScript 代码的：

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" width="200" height="200">
  <script>
    <![CDATA[
      <!-- JS 代码 -->
    ]]>
  </script>
</svg>

矩形（<rect>）

基本语法

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="100" height="100" rx="15" ry="15" />
</svg>

语法说明：

• x1, y1：表示左上角（upper-left）顶点的坐标；
• width, height：分别表示矩形的宽和高；
• rx, ry：分别表示水平和垂直方向的圆角半径；
• fill：表示填充颜色。

示例1

新窗口打开

示例说明：

• 绿色背景的矩形通过 fill rx ry 等元素属性（Presentation Attributes）控制样式；
• 蓝色背景的矩形通过 class 控制样式。

术语介绍

以下代码中的第9行，fill rx ry 等被称为 SVG Presentation Attributes；

第4-6行的 fill rx ry 被称为 CSS Style Properties。

SVG

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" width="200" height="200">
  <style type="text/css">
    .css-rect {
      fill: blue;
      rx: 1cm;
      ry: 2cm;
    }
  </style>
  <rect ... fill="green" rx="10px" ry="30px" />
  <rect ... class="css-rect" />
</svg>

示例2

新窗口打开

示例说明：

• 通过 JavaScript 代码来创建 <rect>。

圆形(<circle>)和椭圆(<ellipse>)

基本语法

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50"/>
  <ellipse cx="50" cy="50" rx="100" ry="50" />
</svg>

语法说明：

• cx, cy：表示圆形或椭圆的中心点坐标；
• r：表示圆形半径；
• rx, ry：表示椭圆水平和垂直半径。

示例

新窗口打开

示例说明：

• 定义了相同中心点坐标的1个圆形和1个椭圆，并且通过 CSS Animation 模拟了眨眼的效果。

相关 DOM 接口

• <line> SVGLineElement
• <rect> SVGRectElement
• <circle> SVGCircleElement
• <ellipse> SVGEllipseElement

小结

本节讲解了 SVG 的4种基本图形，下一节我们讲解自定义图形。