Helpful resources ▼
  Download   Pricing   Buy

SVG 形状 – 基础、SVG 代码和示例

简单矢量形状是徽标、图表、图标、统计图以及许多 SVG 图形的基础。在 SVG 文件中，每个基本形状都由一个元素表示，元素属性定义它的位置、尺寸和视觉样式。你可以自定义填充颜色、不透明度、圆角、描边宽度等。

本文将学习：

  • 创建 SVG 矩形、圆、椭圆、直线、折线和多边形。
  • 读取每种基本形状使用的坐标属性。
  • 应用 fill、stroke、不透明度和圆角。
  • 在同一个 SVG 图像中组合多个 SVG shape 元素。

SVG <rect> – 矩形元素

<rect> 元素创建矩形和圆角矩形。矩形由左上角定位，并通过 width 和 height 设置尺寸。

Rectangle Attributes

属性说明默认值
x左上角的 x 坐标0
y左上角的 y 坐标0
width矩形宽度–
height矩形高度–
rx圆角的水平半径0
ry圆角的垂直半径0

你可以用 presentation attributes 或 style 属性设置矩形样式。下面的示例使用 fill、stroke、不透明度和圆角半径值，展示几何和绘制如何配合。

1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2    <rect x="60" y="100" width="70" height="40" rx="10" ry="10" style="fill:#778899; stroke:#FF4500; stroke-width:5; fill-opacity:0.7; stroke-opacity:0.6" />
3</svg>

第一个示例创建一个左上角位于 (60, 100) 的矩形。它宽 70 个单位，高 40 个单位，带圆角和橙色描边。第二个示例移除圆角，并使用更大的近似正方形矩形，因此更容易看出 rx/ry 与普通直角的区别。

1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2    <rect x="120" y="140" width="90" height="90" style="fill:grey; stroke-width:3; stroke:rgb(0,0,0)" />
3</svg>

两个灰色 SVG 矩形，展示基本矩形和圆角矩形

使用的样式属性

颜色可以这样指定：

  1. 命名颜色，例如 fill:blue。
  2. RGB 函数，例如 fill:rgb(0,0,255)。
  3. Hex 写法，例如 fill:#0000ff。

SVG <circle> – 圆元素

<circle> 元素绘制一个正圆。它的位置由中心坐标 cx 和 cy 定义，尺寸由半径 r 定义。

Circle Attributes

属性说明默认值
cx圆心的 x 坐标0
cy圆心的 y 坐标0
r圆半径–
1<svg width="300" height="550" xmlns="http://www.w3.org/2000/svg">
2    <circle cx="250" cy="100" r="60" style="fill:red; stroke-width:3; stroke:rgb(0,0,0); fill-opacity:0.7" />
3</svg>

下面的代码用 cx 和 cy 设置圆心，用 r 设置半径。由于圆同时使用 fill 和 stroke，输出也展示了形状几何和绘制属性如何组合。

两个红色 SVG 圆形，展示 fill、stroke 和 opacity

圆会超出 300 px 的 viewport 宽度；要完整显示，宽度至少需要 310 px（cx + r）。

SVG <ellipse> – 椭圆元素

<ellipse> 元素创建椭圆形。它同样使用中心点，但有两个半径：rx 表示水平方向尺寸，ry 表示垂直方向尺寸。

Ellipse Attributes

属性说明默认值
cx椭圆中心的 x 坐标0
cy椭圆中心的 y 坐标0
rx水平半径，也就是宽度的一半–
ry垂直半径，也就是高度的一半–
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2    <ellipse cx="140" cy="310" rx="90" ry="20" style="fill:OrangeRed" />
3    <ellipse cx="120" cy="280" rx="110" ry="20" style="fill:grey; fill-opacity:0.5" />
4</svg>

示例绘制两个具有不同半径和不透明度的椭圆。第二个椭圆（灰色，50% opacity）渲染在第一个上方，因为 SVG 按源代码顺序绘制元素：后出现的元素位于先出现元素之上。

两个 SVG 椭圆

SVG <line> – 直线元素

<line> 元素在两个坐标点之间绘制一条直线段。它没有填充区域，因此可见线条通常需要 stroke 和 stroke-width。

Line Attributes

属性说明默认值
x1起点的 x 坐标–
y1起点的 y 坐标–
x2终点的 x 坐标–
y2终点的 y 坐标–
style (stroke, stroke-width)线条视觉样式–
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2    <line x1="30" y1="30" x2="350" y2="290" style="stroke:rgb(255,0,0); stroke-width:3" />
3    <line x1="30" y1="50" x2="300" y2="350" style="stroke:grey; stroke-width:5" />
4    <line x1="20" y1="80" x2="100" y2="200" style="stroke:orangered; stroke-width:8" />
5</svg>

三条具有不同颜色和粗细的 SVG 直线

示例中每条线都有不同起点、终点、颜色和粗细。stroke property 定义线条颜色，stroke-width 设置线条粗细。

SVG <polyline> – 折线元素

<polyline> 元素绘制一系列相连的直线段。它常用于折线、图表线、简单轮廓和开放角形。

Polyline Attributes

属性说明默认值
points定义折线顶点的 x,y 坐标对列表–
style (fill, stroke, stroke-width)形状视觉样式–
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2    <polyline points="280,290 300,220 320,290" style="fill:grey; stroke:grey; stroke-width:2; fill-opacity:0.5" />
3    <polyline points="220,200 240,180 260,200 280,180 300,200 320,180 340,200" style="fill:none; stroke:red; stroke-width:6" />
4</svg>

红色折线形成 zig-zag，灰色填充折线形成三角形

第一个 polyline 使用三个点，视觉上形成类似三角形的形状。第二个 polyline 是开放 zig-zag 线，设置了 fill="none"，当 polyline 应表现为线条而不是填充形状时，这通常最清晰。

有关 SVG 样式的更多信息，请参见 SVG 中的填充和描边。

SVG <polygon> – 多边形元素

<polygon> 元素定义由一系列连接点组成的闭合形状。SVG 会自动把最后一个点连接回第一个点。

Polygon Attributes

属性说明默认值
points每个顶点的 x,y 坐标对列表，至少包含三个点–
style (fill, stroke, stroke-width)多边形视觉样式–
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2    <polygon points="160,10 350,140 210,350 50,199" style="fill:orange;stroke:purple;stroke-width:1" />
3</svg>

polygon 示例在 points 属性中使用四个坐标对。由于 <polygon> 始终闭合，紫色描边会自动从最后一个点返回第一个点。

带紫色边框的橙色多边形，展示四点形状

如何创建 SVG 形状

  1. 创建外层 <svg> 元素，并设置 width、height 和 xmlns。
  2. 选择基本形状元素，例如 <rect>、<circle>、<ellipse>、<line>、<polyline> 或 <polygon>。
  3. 为该元素设置必需的坐标和尺寸属性。
  4. 添加视觉属性，例如 fill、stroke、stroke-width 或 opacity。
  5. 预览 SVG，如果形状被裁剪，则调整坐标、尺寸或 viewport。

SVG Basic Shapes – 组合示例

一个最小 SVG 文档可以把所有基本形状组合成一幅图。这在用简单 primitives 构建图表、徽章、图标或生成图形时很有用。

 1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
 2    <line x1="30" y1="30" x2="350" y2="290" style="stroke:rgb(255,0,0); stroke-width:3" />
 3    <line x1="30" y1="50" x2="300" y2="350" style="stroke:grey; stroke-width:5" />
 4    <rect x="60" y="100" width="70" height="40" rx="10" ry="10" style="fill:#778899; stroke:#FF4500; stroke-width:5; fill-opacity:0.7; stroke-opacity:0.6" />
 5    <polygon points="160,10 350,140 210,350 50,199" style="fill:orange; stroke:purple; stroke-width:1; fill-opacity:1" />
 6    <rect x="120" y="150" width="90" height="90" style="fill:grey; stroke-width:3; stroke:rgb(0,0,0)" />
 7    <circle cx="250" cy="100" r="60" style="fill:red; stroke:black; stroke-width:3; fill-opacity:0.7" />
 8    <ellipse cx="140" cy="310" rx="90" ry="20" style="fill:OrangeRed" />
 9    <ellipse cx="120" cy="280" rx="110" ry="20" style="fill:grey; fill-opacity:0.5" />
10    <polyline points="220,200 240,180 260,200 280,180 300,200 320,180 340,200" style="fill:none; stroke:red; stroke-width:6" />
11    <line x1="20" y1="80" x2="100" y2="200" style="stroke:orangered; stroke-width:8" />
12    <polyline points="280,290 300,220 320,290" style="fill:grey; stroke:grey; stroke-width:2; fill-opacity:0.5" />
13</svg>

展示所有基本 shape 元素的组合 SVG 插图

“SVG Basic Shapes” 插图包含上文描述的所有图形：直线、矩形、圆、椭圆、折线和多边形。旁边是 Wassily Kandinsky 的著名作品 “Pink Accent”，它说明简单几何形状也可以形成更具表现力的构图。

Common SVG Shape Mistakes and Fixes

问题可能原因修复方法
形状不可见SVG viewport 小于形状范围增大 width / height 或调整 viewBox
形状被裁剪坐标超出 viewport 边界重新计算坐标或扩大 SVG canvas
Fill 颜色不显示设置了 fill="none" 或 fill-opacity="0"设置有效 fill 值和 opacity
Stroke 不可见stroke-width="0" 或缺少 stroke同时定义 stroke 和正数 stroke-width
圆角不起作用rx / ry 缺失或为零设置非零 rx 和 ry 属性
元素意外重叠SVG 按源代码顺序渲染元素调整标记中的元素顺序，或使用 grouping

SVG 形状快速配色

任务示例
纯色填充fill="blue"
半透明填充fill="red" fill-opacity="0.5"
透明填充并显示轮廓fill="none" stroke="black"
半透明描边stroke="black" stroke-opacity="0.4"
粗彩色轮廓stroke="orange" stroke-width="6"
虚线轮廓stroke-dasharray="5,3"

高级 SVG 样式技术请参见 SVG 中的填充和描边。

FAQ – SVG 形状

如何选择合适的 SVG shape 元素？

矩形使用 <rect>，等半径圆形使用 <circle>，椭圆使用 <ellipse>，单条直线使用 <line>，开放线段链使用 <polyline>，由点组成的闭合形状使用 <polygon>。

polyline 和 polygon 有什么区别？

<polyline> 绘制相连点，但保持开放，除非你手动重复第一个点。<polygon> 会自动把最后一个点连接回第一个点，从而闭合形状。

SVG 形状可以同时使用 fill 和 stroke 吗？

可以。大多数 SVG 形状可以同时使用 fill 和 stroke。fill 绘制形状内部，stroke 和 stroke-width 绘制轮廓。

基本 SVG 形状可以替代 path data 吗？

可以，当图形只是简单矩形、圆、椭圆、直线、折线或多边形时，基本形状更清晰。需要曲线、圆弧、自定义轮廓或单个复杂轮廓时，请使用 SVG Path Data。

规范和相关资源

SVG viewBox SVG Path Data