基础入门

SVG 提供多种基本形状元素(如 <rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>、<path> 等),它们共享许多公共属性。这些属性控制着形状的外观、位置、大小和样式等基本特征。

文档结构

基本语法

html

<svg
  width="宽度"
  height="高度"
  viewBox="视口坐标"
  xmlns="http://www.w3.org/2000/svg"
>
  <!-- SVG 内容 -->
</svg>

常用属性

width 和 height:设置 SVG 的显示尺寸
viewBox:定义坐标系统,格式为 "min-x min-y width height"
preserveAspectRatio:控制图形如何适应容器尺寸
version:SVG 版本号(通常不需要指定)

使用方式

在 HTML5 中 SVG 可以通过以下多种方式嵌入网页:

1. 直接嵌入 HTML

将 SVG 代码直接写入 HTML 文档

html

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

优点: 简单直接,支持交互
缺点: 增加 HTML 文件体积

2. 外部引用

创建 .svg 文件后,通过以下标签插入:

html

<!-- 简单引用,不支持交互 -->
<img src="image.svg" />

<!-- 推荐,支持交互和脚本 -->
<object type="image/svg+xml" data="image.svg"></object>

<!-- 兼容旧浏览器 -->
<embed src="image.svg" type="image/svg+xml" />

<!-- 作为下载链接 -->
<a href="image.svg">下载 SVG</a>

3. CSS 背景

css

.element {
  background-image: url("image.svg");
}

优点: 样式控制灵活
缺点: 无法直接操作 SVG 元素

对比说明

方法	优点	缺点
直接嵌入	简单直接,支持交互	增加 HTML 文件体积
`<img>`	简单易用	不支持脚本和 CSS 交互
`<object>`	支持交互,可替换	代码稍复杂
CSS 背景	样式控制灵活	无法直接操作 SVG 元素

公共属性

坐标定位属性

属性	适用元素	描述	取值
`x`	`<rect>`、`<image>`、`<text>`、`<line>`、`<polygon>` 等	元素左上角或起点的 x 坐标	数值(像素)
`y`	`<rect>`、`<image>`、`<text>`、`<line>`、`<polygon>` 等	元素左上角或起点的 y 坐标	数值(像素)
`cx`	`<circle>`、`<ellipse>`	圆心或椭圆中心的 x 坐标	数值(像素)
`cy`	`<circle>`、`<ellipse>`	圆心或椭圆中心的 y 坐标	数值(像素)
`x1`, `y1`	`<line>`、`<polyline>`、`<polygon>`	线段起点坐标	数值(像素)
`x2`, `y2`	`<line>`	线段终点坐标	数值(像素)

示例:

html

<svg width="200" height="200">
  <!-- 使用 x、y 定位的矩形 -->
  <rect x="10" y="10" width="50" height="50" fill="red" />

  <!-- 使用 cx、cy 定位的圆形 -->
  <circle cx="100" cy="100" r="40" fill="blue" />
</svg>

尺寸属性

属性	适用元素	描述	取值	默认值
`width`	`<rect>`、`<image>`、`<svg>` 等	元素宽度	正数值(像素)	必需
`height`	`<rect>`、`<image>`、`<svg>` 等	元素高度	正数值(像素)	必需
`r`	`<circle>`、`<radialGradient>`	圆形半径	正数值(像素)	必需
`rx`、`ry`	`<rect>`、`<ellipse>`	圆角矩形的水平和垂直半径	非负数值	0

示例:

html

<svg width="200" height="200">
  <!-- 指定尺寸的矩形 -->
  <rect x="10" y="10" width="80" height="60" fill="green" />

  <!-- 圆角矩形 -->
  <rect x="10" y="80" width="80" height="60" rx="10" ry="20" fill="orange" />
</svg>

填充属性

属性	描述	取值	默认值
`fill`	设置形状内部填充颜色	颜色名称、十六进制、RGB、RGBA 或继承	"black"
`fill-opacity`	设置填充透明度	0(透明)到 1(不透明)	1
`fill-rule`	定义填充规则	"nonzero"(非零环绕)或 "evenodd"(奇偶环绕)	"nonzero"

示例:

html

<svg width="200" height="200">
  <!-- 不同填充方式的形状 -->
  <rect x="10" y="10" width="50" height="50" fill="red" />
  <circle cx="80" cy="35" r="25" fill="blue" fill-opacity="0.5" />

  <!-- 使用 evenodd 规则的五角星 -->
  <polygon
    points="150,10 165,40 200,40 170,60 180,90 150,70 120,90 130,60 100,40 135,40"
    fill="green"
    fill-rule="evenodd"
  />
</svg>

描边属性

属性	描述	取值	默认值
`stroke`	设置形状描边颜色	颜色名称、十六进制、RGB、RGBA 或继承	"none"
`stroke-width`	设置描边宽度	正数值(像素)	1
`stroke-opacity`	设置描边透明度	0(透明)到 1(不透明)	1
`stroke-linecap`	设置线条端点样式	"butt"(平头)、"round"(圆头)、"square"(方头)	"butt"
`stroke-linejoin`	设置线条连接处样式	"miter"(尖角)、"round"(圆角)、"bevel"(斜角)	"miter"
`stroke-dasharray`	设置虚线模式	数值列表(如 "5,5" 表示 5px 实线 5px 空白)	none
`stroke-dashoffset`	设置虚线偏移量	数值(像素)	0

示例:

html

<svg width="200" height="200">
  <!-- 不同描边样式的形状 -->
  <rect
    x="10"
    y="10"
    width="50"
    height="50"
    stroke="black"
    stroke-width="2"
    stroke-linejoin="round"
  />

  <!-- 虚线矩形 -->
  <rect
    x="70"
    y="10"
    width="50"
    height="50"
    stroke="blue"
    stroke-width="2"
    stroke-dasharray="5,3"
  />

  <!-- 圆头线条的三角形 -->
  <polygon
    points="150,10 180,60 120,60"
    fill="none"
    stroke="red"
    stroke-width="3"
    stroke-linecap="round"
  />
</svg>

其他常用属性

属性	描述	取值	默认值
`id`	元素唯一标识符	字符串	无
`class`	CSS 类名	字符串	无
`style`	内联样式	CSS 样式字符串	无
`opacity`	整体透明度	0(透明)到 1(不透明)	1
`visibility`	可见性	"visible"(可见)、"hidden"(隐藏)、"collapse"(折叠)	"visible"
`transform`	应用变换	`translate()`, `rotate()`, `scale()`, `skewX()`, `skewY()`, `matrix()`	无

示例:

html

<svg width="200" height="200">
  <!-- 使用 id 和 class 的矩形 -->
  <rect
    id="myRect"
    class="highlight"
    x="10"
    y="10"
    width="50"
    height="50"
    fill="red"
  />

  <!-- 使用内联样式的圆形 -->
  <circle
    cx="80"
    cy="35"
    r="25"
    style="fill:blue; stroke:black; stroke-width:2;"
  />

  <!-- 设置透明度的多边形 -->
  <polygon points="150,10 180,60 120,60" fill="green" opacity="0.5" />

  <!-- 隐藏的矩形 -->
  <rect
    x="10"
    y="100"
    width="50"
    height="50"
    fill="purple"
    visibility="hidden"
  />
</svg>

基本形状

矩形 rect

<rect> 是 SVG 中最基础的形状元素之一,用于绘制矩形或正方形。

html

<rect
  x="x坐标"
  y="y坐标"
  width="宽度"
  height="高度"
  [rx="圆角水平半径"
  ]
  [ry="圆角垂直半径"
  ]
  [其他属性...]
/>

圆角属性:

属性	描述	取值	默认值
`rx`	圆角的水平半径	非负数值	0
`ry`	圆角的垂直半径	非负数值	0

注意:

如果只设置 rx,则 ry 会自动等于 rx,创建正圆角
如果 rx 或 ry 大于矩形宽度或高度的一半,则会被限制为最大可能值

示例:

html

<svg width="200" height="200">
  <!-- 圆角矩形 -->
  <rect x="10" y="10" width="100" height="80" rx="10" ry="10" fill="green" />

  <!-- 正圆角矩形(rx=ry) -->
  <rect x="10" y="110" width="100" height="80" rx="15" fill="orange" />
</svg>

圆形 circle

<circle> 是 SVG 中用于绘制圆形的基本形状元素。

html

<circle cx="圆心x坐标" cy="圆心y坐标" r="半径" [其他属性...] />

DANGER

r 是必需属性,没有默认值。如果 r 设置为 0,则不会渲染任何内容。负值的 r 会被视为无效

示例:

html

<svg width="200" height="200">
  <!-- 基本圆形 -->
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

椭圆 ellipse

<ellipse> 是 SVG 中用于绘制椭圆的基本形状元素。

html

<ellipse
  cx="椭圆中心x坐标"
  cy="椭圆中心y坐标"
  rx="水平半径"
  ry="垂直半径"
  [其他属性...]
/>

注意:

rx 和 ry 都是必需属性,没有默认值
如果 rx 和 ry 相等,则绘制的是圆形
如果任一半径为 0,则不会渲染任何内容
负值的半径会被视为无效

示例:

html

<svg width="200" height="200">
  <!-- 基本椭圆 -->
  <ellipse cx="100" cy="100" rx="80" ry="50" fill="blue" />

  <!-- 圆形(特殊椭圆) -->
  <ellipse cx="100" cy="180" rx="50" ry="50" fill="red" />
</svg>

多边形 polygon

<polygon> 是 SVG 中用于绘制多边形的基本形状元素,可以创建任意边数的闭合多边形。

html

<polygon points="点1,点1 点2,点2 点3,点3 ..." [其他属性...] />

顶点定义属性:

属性	描述	取值	默认值
`points`	定义多边形的所有顶点坐标	一系列由空格分隔的 `x,y` 坐标对	必需

注意:

points 是必需属性,没有默认值
每个顶点由 x,y 坐标对表示
顶点之间用空格分隔
最后一个顶点会自动与第一个顶点连接形成闭合路径
坐标值可以是整数或浮点数

示例:

html

<svg width="400" height="400">
  <!-- 基本三角形 -->
  <polygon points="50,250 150,100 250,250" fill="#4285F4" />

  <!-- 五边形 -->
  <polygon points="50,150 110,80 170,150 110,220 50,150" fill="#34A853" />

  <!-- 星形 -->
  <polygon
    points="250,50 270,90 310,90 280,120 290,160 250,140 210,160 220,120 190,90 230,90"
    fill="#FBBC05"
  />
</svg>

直线 line

<line> 是 SVG 中用于绘制直线的基本形状元素。

html

<line
  x1="起点x坐标"
  y1="起点y坐标"
  x2="终点x坐标"
  y2="终点y坐标"
  [其他属性...]
/>

示例:

html

<svg width="200" height="200">
  <line x1="10" y1="10" x2="190" y2="190" stroke="black" stroke-width="2" />
</svg>

折线 polyline

<polyline> 是 SVG 中用于绘制由多条直线段连接而成的折线的基本形状元素。

html

<polyline points="点1,点1 点2,点2 点3,点3 ..." [其他属性...] />

注意:

points 是必需属性,没有默认值
每个顶点由 x、y 坐标对表示
顶点之间用空格分隔
坐标值可以是整数或浮点数
不会自动闭合路径(与 <polygon> 不同)

示例:

html

<svg width="500" height="300">
  <!-- 基本折线 -->
  <polyline
    points="50,50 100,80 150,60 200,90 250,70 300,100"
    fill="none"
    stroke="#4285F4"
    stroke-width="2"
  />
</svg>

分组与复用

分组 `<g>`

<g> 元素(group)用于将多个元素组合在一起。对 <g> 元素应用的变换和样式会继承给其所有子元素。

示例:

xml

<svg width="200" height="100">
  <!-- 对整个组应用旋转和描边样式 -->
  <g transform="rotate(15, 100, 50)" stroke="green" stroke-width="2" fill="lightgreen">
    <rect x="60" y="10" width="80" height="30"/>
    <circle cx="100" cy="70" r="20"/>
  </g>
</svg>

定义与复用 `<defs>` 和 `<use>`

<defs> 元素用于定义可复用的图形对象。在 <defs> 中定义的元素不会直接显示,除非被 <use> 元素引用。<use> 元素通过 href 属性引用在 <defs> 中定义的对象,并在指定位置创建它的一个副本。

这种模式对于重复使用复杂图形非常有用,可以显著减小文件大小并提高渲染性能。

示例:

xml

<svg width="300" height="100">
  <!-- 定义一个可复用的星形 -->
  <defs>
    <polygon id="star" points="50,10 61,40 98,40 68,62 79,92 50,75 21,92 32,62 2,40 39,40" fill="gold"/>
  </defs>

  <!-- 复用这个星形三次 -->
  <use href="#star" x="0" y="0" />
  <use href="#star" x="100" y="0" transform="scale(0.8)" />
  <use href="#star" x="200" y="0" transform="scale(0.6)" />
</svg>

注意事项

SVG 与 Canvas 的区别:
- SVG 是基于 XML 的矢量图形,适合需要交互和缩放的场景
- Canvas 是基于像素的位图,适合需要频繁更新的大量图形
浏览器兼容性:
- 现代浏览器都支持 SVG,但某些高级特性可能需要前缀或替代方案
性能考虑:
- 复杂的 SVG 可能影响渲染性能
- 对于大量静态图形,考虑使用 <use> 元素复用
响应式设计:
- 使用 viewBox 和 CSS 可以轻松创建响应式 SVG

下一步

坐标与视口 - 深入理解 viewBox 和坐标系统
路径绘制 - 学习使用 path 绘制复杂图形
样式与效果 - 掌握填充、描边、渐变等样式属性

基础入门

文档结构

基本语法

常用属性

使用方式

1. 直接嵌入 HTML

2. 外部引用

3. CSS 背景

对比说明

公共属性

坐标定位属性

尺寸属性

填充属性

描边属性

其他常用属性

基本形状

矩形 rect

圆形 circle

椭圆 ellipse

多边形 polygon

直线 line

折线 polyline

分组与复用

分组 <g>

定义与复用 <defs> 和 <use>

注意事项

下一步

分组 `<g>`

定义与复用 `<defs>` 和 `<use>`