跳到主要内容

基本形状

SVG 提供了一系列预定义的基本形状元素，这些元素可以快速创建常见的图形。掌握这些基本形状是学习 SVG 的第一步。

SVG 文档结构​

在开始绘制图形之前，我们需要了解 SVG 文档的基本结构：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG 内容 -->
</svg>

width 和 height：定义 SVG 画布的宽度和高度。可以使用像素（默认单位）或百分比。

xmlns：声明 XML 命名空间，这是必需的，告诉浏览器这是 SVG 文档。

viewBox：定义 SVG 的坐标系统，格式为 viewBox="min-x min-y width height"。这个属性对于响应式 SVG 非常重要。

<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80" fill="blue"/>
</svg>

上面的例子中，viewBox 定义了一个 100x100 的坐标系统，但实际显示尺寸是 200x200，所以图形会被放大两倍。

矩形 - rect​

矩形是最常用的基本形状之一。<rect> 元素用于创建矩形和正方形。

基本属性​

属性说明默认值
x矩形左上角的 x 坐标0
y矩形左上角的 y 坐标0
width矩形的宽度必需
height矩形的高度必需
rx圆角的 x 轴半径0
ry圆角的 y 轴半径0

基本矩形​

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="60" fill="#3498db"/>
</svg>

这段代码创建了一个蓝色矩形，位于坐标 (10, 10)，宽 80 像素，高 60 像素。

圆角矩形​

通过设置 rx 和 ry 属性可以创建圆角矩形：

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="60" rx="10" ry="10" fill="#2ecc71"/>
</svg>

当只设置 rx 时，ry 会自动取相同值。圆角半径不能超过矩形宽高的一半。

描边矩形​

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="60" 
        fill="none" stroke="#e74c3c" stroke-width="3"/>
</svg>

fill="none" 表示不填充，stroke 设置描边颜色，stroke-width 设置描边宽度。

圆形 - circle​

<circle> 元素用于创建圆形，只需要指定圆心坐标和半径。

基本属性​

属性说明默认值
cx圆心的 x 坐标0
cy圆心的 y 坐标0
r圆的半径必需

基本圆形​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="75" r="50" fill="#9b59b6"/>
</svg>

圆心位于 (100, 75)，半径为 50 像素。

带描边的圆形​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="75" r="50" 
          fill="#f1c40f" stroke="#f39c12" stroke-width="5"/>
</svg>

椭圆 - ellipse​

<ellipse> 元素用于创建椭圆，与圆形的区别是可以分别设置 x 轴和 y 轴的半径。

基本属性​

属性说明默认值
cx椭圆中心的 x 坐标0
cy椭圆中心的 y 坐标0
rx椭圆的 x 轴半径必需
ry椭圆的 y 轴半径必需

基本椭圆​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="75" rx="80" ry="40" fill="#1abc9c"/>
</svg>

这是一个横向椭圆，x 轴半径 80，y 轴半径 40。

纵向椭圆​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="75" rx="40" ry="60" fill="#e67e22"/>
</svg>

当 rx 大于 ry 时是横向椭圆，ry 大于 rx 时是纵向椭圆。

线条 - line​

<line> 元素用于绘制直线段，需要指定起点和终点坐标。

基本属性​

属性说明默认值
x1起点的 x 坐标0
y1起点的 y 坐标0
x2终点的 x 坐标0
y2终点的 y 坐标0

基本线条​

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="10" x2="190" y2="90" 
        stroke="#34495e" stroke-width="3"/>
</svg>

线条没有填充属性，必须设置 stroke 才能显示。

虚线​

通过 stroke-dasharray 属性可以创建虚线：

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="10" y1="50" x2="190" y2="50" 
        stroke="#7f8c8d" stroke-width="2" stroke-dasharray="10,5"/>
</svg>

stroke-dasharray="10,5" 表示实线 10 像素，空白 5 像素，循环重复。

折线 - polyline​

<polyline> 元素用于绘制连接多点的折线，所有点按顺序连接。

基本属性​

属性说明
points点序列，格式为 "x1,y1 x2,y2 x3,y3 ..."

基本折线​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <polyline points="10,140 50,80 100,100 150,40 190,70"
            fill="none" stroke="#8e44ad" stroke-width="3"/>
</svg>

填充折线​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <polyline points="10,140 50,80 100,100 150,40 190,70 190,140"
            fill="#ecf0f1" stroke="#2c3e50" stroke-width="2"/>
</svg>

当设置填充时，起点和终点会自动连接形成封闭区域。

多边形 - polygon​

<polygon> 元素与 <polyline> 类似，但会自动闭合路径，即最后一个点会连接到第一个点。

基本属性​

属性说明
points点序列，格式为 "x1,y1 x2,y2 x3,y2 ..."

三角形​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,20 180,130 20,130" fill="#c0392b"/>
</svg>

只需要三个点就能创建三角形。

五边形​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 170,55 145,130 55,130 30,55" 
           fill="#16a085" stroke="#1abc9c" stroke-width="2"/>
</svg>

星形​

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 120,60 180,60 130,95 150,145 100,115 50,145 70,95 20,60 80,60"
           fill="#f39c12" stroke="#e67e22" stroke-width="2"/>
</svg>

通过交替设置外顶点和内顶点，可以创建星形图案。

形状选择指南​

需求推荐元素
矩形或正方形<rect>
完美圆形<circle>
椭圆或扁圆<ellipse>
简单直线<line>
开放折线<polyline>
封闭多边形<polygon>
复杂图形<path>

在 HTML 中使用 SVG​

SVG 可以通过多种方式嵌入 HTML：

内联 SVG​

直接在 HTML 中编写 SVG 代码：

<!DOCTYPE html>
<html>
<body>
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="blue"/>
  </svg>
</body>
</html>

内联 SVG 可以被 CSS 样式化和 JavaScript 操作。

img 标签引用​

将 SVG 保存为独立文件，用 img 标签引用：

<img src="image.svg" alt="SVG 图像" width="100" height="100">

这种方式无法用 CSS 或 JS 操作 SVG 内部元素。

CSS 背景图像​

.icon {
  width: 100px;
  height: 100px;
  background-image: url('image.svg');
  background-size: contain;
}

object 标签嵌入​

<object type="image/svg+xml" data="image.svg" width="100" height="100">
  SVG 不支持时的替代内容
</object>

这种方式可以保留 SVG 的交互性。

小结​

基本形状是 SVG 的基础构建块。矩形、圆形、椭圆适合规则图形，线条、折线、多边形适合由点定义的图形。选择合适的形状元素可以简化代码，提高可读性。对于更复杂的图形，需要使用 <path> 元素，这将在下一章详细介绍。