基础标签
<svg>标签，根标签
<svg xmlns="http://www.w3.org/2000/svg" // 【必需】声明 SVG 命名空间
xmlns:xlink="http://www.w3.org/1999/xlink" // 声明 XLink 命名空间（用于引用外部资源，如 `<use>`）
width="400" height="300" // 定义视窗物理尺寸（单位：px、%、em 等）
x="0" y="0" // 在嵌套 SVG 或 `<image>` 中定义偏移坐标（仅子 SVG 有效）
viewBox="0 0 200 150" // 定义内部坐标系：左上角(0,0)，虚拟宽200，高150
preserveAspectRatio="xMidYMid meet" // 控制 viewBox 与视窗的适配规则：
// - xMidYMid：水平/垂直居中（默认）
// - meet：保持比例，完整显示内容（不裁剪）（默认）
version="1.1" // 声明 SVG 版本（已废弃，现代浏览器忽略）
baseProfile="full" // 声明 SVG 特性集（已废弃，默认不限制）
zoomAndPan="disable" // 禁止用户缩放/平移（已废弃，改用 CSS `user-select: none`）
enable-background="new 0 0 200 200" // 定义背景缓存区（仅 SVG 1.1 过滤器有效，已废弃）
class="my-svg" id="svg-root" // 全局属性：CSS 类名、唯一标识符
style="border: 1px solid #ccc;" // 全局属性：内联 CSS 样式
role="img" aria-label="示例图形" // 无障碍属性：声明元素角色及描述
transform="translate(10,20)" // 应用平移、旋转等变换（根 SVG 中部分浏览器支持）
xml:space="preserve" // 控制文本中空格处理（默认 `default`，`preserve` 保留空格）
systemLanguage="zh-CN" // 根据用户语言选择显示内容（高级用法）
contentScriptType="text/javascript" // 指定脚本语言类型（已废弃，默认 ECMAScript）
contentStyleType="text/css" // 指定样式语言类型（已废弃，默认 CSS）
>
<!-- 图形内容 -->
</svg>
常用属性
| 属性分类 | 属性名 | 功能说明 | 取值示例 | 是否必需 |
|---|---|---|---|---|
| 必需属性 | xmlns | 声明 SVG 命名空间 | http://www.w3.org/2000/svg | 是 |
| 视窗尺寸 | width | 定义画布物理宽度 | 400、100% | 否 |
height | 定义画布物理高度 | 300、auto | 否 | |
| 坐标系控制 | viewBox | 定义虚拟坐标系范围和位置 | 0 0 200 150（min-x, min-y, width, height） | 否 |
preserveAspectRatio | 控制 viewBox 与视窗的适配规则 | xMidYMid meet、none | 否 | |
| 嵌套偏移 | x | 子级 SVG 或 <image> 的水平偏移位置 | 10、20% | 否 |
y | 子级 SVG 或 <image> 的垂直偏移位置 | 5、15% | 否 | |
| XML 扩展 | xmlns:xlink | 声明 XLink 命名空间（用于引用外部资源） | http://www.w3.org/1999/xlink | 否 |
xml:space | 控制文本中空格处理方式 | preserve（保留空格）、default（折叠空格） | 否 | |
| 废弃属性 | version | 声明 SVG 版本（已废弃） | 1.1 | 否 |
baseProfile | 声明 SVG 特性集（已废弃） | full、basic | 否 | |
zoomAndPan | 控制用户缩放行为（已废弃） | magnify（允许缩放）、disable（禁止） | 否 | |
enable-background | 定义背景缓存区（仅 SVG 1.1 有效，已废弃） | new 0 0 200 200 | 否 | |
| 全局属性 | class | 定义 CSS 类名 | "chart" | 否 |
id | 定义唯一标识符 | "svg-root" | 否 | |
style | 定义内联 CSS 样式 | "border: 1px solid #000;" | 否 | |
| 无障碍属性 | role | 定义元素语义角色 | "img"（图像）、"button"（按钮） | 否 |
aria-* | 增强无障碍访问描述 | aria-label="描述文字" | 否 | |
| 变换 | transform | 应用平移、旋转等变换（根 SVG 中部分浏览器支持） | translate(10,20)、rotate(45) | 否 |
| 脚本与样式 | contentScriptType | 指定脚本语言类型（已废弃） | text/javascript | 否 |
contentStyleType | 指定样式语言类型（已废弃） | text/css | 否 | |
| 国际化 | systemLanguage | 根据用户语言选择性显示内容 | zh-CN（中文）、en-US（英文） | 否 |
| 边框 | vector-effect | 当图形被放大时，保持比例，不会让视觉上变细 | "non-scaling-stroke" | |
视口适配规则
<circle> 圆标签
<circle
cx="50" cy="50" r="40" // 圆心坐标 (cx, cy) 和半径 r
fill="red" // 填充颜色
stroke="black" // 边框颜色
stroke-width="2" // 边框宽度
opacity="0.8" // 整体透明度（0~1）
transform="rotate(30)" // 应用变换（如旋转、平移）
/>
| 属性名 | 作用 | 默认值 | 示例值 |
|---|---|---|---|
cx | 圆心在 X 轴的坐标（相对于 SVG 坐标系） | 0 | cx="50" |
cy | 圆心在 Y 轴的坐标（相对于 SVG 坐标系） | 0 | cy="50" |
r | 圆的半径（必须为正数） | 0 | r="40" |
fill | 填充颜色（支持颜色名、十六进制、RGB 等） | black | fill="blue" |
stroke | 边框颜色 | none | stroke="#333" |
stroke-width | 边框宽度（单位：像素） | 1 | stroke-width="3" |
stroke-opacity | 边框透明度（0~1） | 1 | stroke-opacity="0.5" |
fill-opacity | 填充透明度（0~1） | 1 | fill-opacity="0.7" |
opacity | 整体透明度（0~1） | 1 | opacity="0.6" |
transform | 应用几何变换（如旋转、平移、缩放） | - | transform="translate(20,10)" |
class / id | CSS 类名或唯一标识符（用于样式或脚本操作） | - | class="my-circle" |
基础用例
1. 基本圆形
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="gold" stroke="navy" stroke-width="4"/>
</svg>
- 效果：绘制一个中心在 (100,100)、半径 80 的圆，填充金色，边框深蓝色宽 4px。
2. 透明边框与填充
<circle cx="50" cy="50" r="40" fill="rgba(255,0,0,0.5)" stroke="green" stroke-opacity="0.3"/>
- 效果：填充红色（透明度 50%），边框绿色（透明度 30%）。
3. 应用旋转变换
<circle cx="50" cy="50" r="30" fill="none" stroke="purple" transform="rotate(45 50 50)"/>
- 效果：以圆心 (50,50) 为中心旋转 45 度，紫色边框无填充。
4. 动态圆（结合动画）
<circle cx="100" cy="100" r="20" fill="blue">
<animate
attributeName="r"
from="20" to="50"
dur="2s"
repeatCount="indefinite"
/>
</circle>
- 效果：半径从 20px 到 50px 循环缩放，持续 2 秒。
<rect>矩形标签
<rect
x="10" y="20" width="200" height="100" // 左上角坐标 (x,y) 和宽高
rx="15" ry="15" // 圆角半径（x轴/y轴方向）
fill="blue" // 填充颜色
stroke="black" stroke-width="2" // 边框颜色和宽度
transform="rotate(45 100 50)" // 应用变换（如旋转、斜切）
/>
属性详解
| 属性名 | 作用 | 默认值 | 示例值 |
|---|---|---|---|
x | 矩形左上角 X 轴坐标（相对于 SVG 坐标系） | 0 | x="10" |
y | 矩形左上角 Y 轴坐标（相对于 SVG 坐标系） | 0 | y="20" |
width | 矩形宽度（必须为正数） | 0 | width="200" |
height | 矩形高度（必须为正数） | 0 | height="100" |
rx | 圆角在 X 轴方向的半径（与 ry 配合使用） | 0 | rx="15" |
ry | 圆角在 Y 轴方向的半径（若未指定，默认等于 rx） | 同rx | ry="10" |
fill | 填充颜色（支持颜色名、十六进制、渐变色等） | black | fill="#FFA500" |
stroke | 边框颜色 | none | stroke="rgba(0,0,0,0.8)" |
stroke-width | 边框宽度（单位：像素） | 1 | stroke-width="3" |
stroke-dasharray | 虚线边框样式（定义线段和间隔长度） | - | stroke-dasharray="5 2" |
transform | 应用几何变换（支持 rotate(a x y) translate(tx,ty) scale(sx,sy) 等） | - | transform="skewX(20)" |
class / id | CSS 类名或唯一标识符（用于样式或脚本操作） | - | class="button-style" |
基础用例
1. 基本矩形
<svg width="300" height="150">
<rect x="50" y="30" width="200" height="90"
fill="lightgreen" stroke="darkgreen" stroke-width="2"/>
</svg>
- 效果：绘制一个左上角在 (50,30)、宽 200、高 90 的矩形，浅绿色填充，深绿色边框。
2. 圆角矩形
<rect x="20" y="20" width="160" height="80" rx="20" ry="10" fill="gold"/>
- 效果：X 轴方向圆角半径 20，Y 轴方向圆角半径 10，形成椭圆角效果。
3. 虚线边框与悬停效果
<rect x="10" y="10" width="120" height="60"
fill="none" stroke="red" stroke-width="2"
stroke-dasharray="8 4"
class="hover-effect"/>
<style>
.hover-effect:hover {
stroke-width: 3;
stroke-dasharray: none; /* 悬停时取消虚线 */
}
</style>
- 效果：默认红色虚线边框，悬停时变为实线并加粗。
4. 动态矩形（结合动画）
<rect x="0" y="50" width="50" height="50" fill="blue">
<animate
attributeName="width"
from="50" to="200"
dur="1.5s"
repeatCount="indefinite"
/>
</rect>
- 效果：宽度从 50px 到 200px 循环伸缩动画，持续 1.5 秒。
注意事项
必填属性：
width和height必须为正数，否则矩形不显示。圆角限制：若
rx > width/2或ry > height/2，会自动调整为半宽/半高。性能优化：避免对大量矩形使用复杂变换（如滤镜），可能导致渲染性能下降。
响应式设计
：可通过百分比单位实现自适应：
xml
<rect x="10%" y="10%" width="80%" height="80%"/>