SVG 急速入门教程（04.基础形状）

Ronnie
159 阅读3分钟

上一篇：如何使用 SVG ？

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

1. 基础和自定义形状

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

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

基础形状有如下特点：

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

自定义形状有如下特点：

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

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

2. 坐标系统简介

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

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

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

3. 线（<line>）

3.1. 基本语法

<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 控制线条宽度

3.2. 示例1

示例说明：

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

SVG 是可以内嵌 CSS 代码的：

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

3.3. 示例2

示例说明：

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

更多 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>

4. 矩形（<rect>）

4.1. 基本语法

<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 表示填充颜色。

4.2. 示例1

示例说明：

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

术语介绍

以下代码中的第9行，fill rx ry 被称为 presentation attribute；

第4-6行的 fill rx ry 被称为 CSS style property。

<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>

4.3. 示例2

示例说明：

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

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

5.1. 基本语法

<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 表示椭圆水平和垂直半径。

5.2. 示例

示例说明：

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

6. 相关 DOM 接口

7. 小结

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

下一篇：自定义形状（Custom Shapes）

avatar
文章
阅读
粉丝