<svg>
<svg> 是在标记中直接嵌入可缩放矢量图形（SVG）的基础元素。它可以帮助你创建清晰、与分辨率无关的图形——从简单图标到复杂的数据可视化——在不同屏幕尺寸与像素密度下都能无损缩放。
使用指南
基础用法
下面是 <svg> 的基础用法示例：
支持的 SVG 标签
以下 SVG 标签已完全支持：
| 标签 | 描述 |
|---|---|
| circle | 定义一个圆。 |
| clipPath | 定义一个裁剪路径。 |
| defs | 可复用定义的容器。 |
| text | 定义一个文本元素。 |
| ellipse | 定义一个椭圆。 |
| g | 对元素进行分组。 |
| image | 嵌入栅格图像。 |
| line | 定义一条直线。 |
| linearGradient | 定义线性渐变。 |
| path | 定义一条路径。 |
| polygon | 定义由直线边组成的闭合图形。 |
| polyline | 定义一系列相连的直线。 |
| radialGradient | 定义径向渐变。 |
| rect | 定义一个矩形。 |
| stop | 定义一个渐变停止点。 |
| svg | SVG 根元素。 |
| use | 引用并复用其他位置定义的图形。 |
支持的 SVG 属性
以下属性可应用于上述标签：
| 属性 | 描述 |
|---|---|
| xlink:href | 资源引用（已废弃，优先使用 href）。 |
| style | 内联 CSS 样式。 |
| points | polygon/polyline 的点列表。 |
| offset | 渐变停止点偏移。 |
| font-size | 文本字号。 |
| id | 唯一标识符。 |
| xmlns | XML 命名空间。 |
| clip-path | 裁剪路径引用。 |
| clip-rule | fill 与 stroke 的裁剪规则。 |
| clipPathUnits | clipPath 的单位。 |
| color | 前景色。 |
| cx, cy | circle/ellipse 的中心坐标。 |
| d | 路径数据。 |
| fill | 填充颜色/绘制方式。 |
| fill-opacity | 填充透明度。 |
| fill-rule | 路径相交时的填充规则。 |
| fx, fy | 径向渐变的焦点。 |
| gradientTransform | 渐变的变换矩阵。 |
| gradientUnits | 渐变的坐标系。 |
| height, width | 尺寸。 |
| href | 超链接引用（xlink:href 的现代替代）。 |
| opacity | 整体透明度。 |
| preserveAspectRatio | 缩放时的宽高比行为。 |
| r | circle 的半径。 |
| rx, ry | 圆角矩形的圆角半径。 |
| spreadMethod | 渐变超出定义范围时的填充方式。 |
| stop-color | 渐变停止点颜色。 |
| stop-opacity | 渐变停止点透明度。 |
| stroke | 描边颜色/绘制方式。 |
| stroke-dasharray | 描边虚线样式。 |
| stroke-dashoffset | 虚线偏移量。 |
| stroke-linecap | 开放子路径端点的形状。 |
| stroke-linejoin | 路径拐角处的连接形状。 |
| stroke-miterlimit | 斜接连接（miter join）的限制。 |
| stroke-opacity | 描边透明度。 |
| stroke-width | 描边宽度。 |
| transform | 变换矩阵。 |
| viewBox | 坐标系与宽高比。 |
| x, y | 位置坐标。 |
| x1, y1, x2, y2 | line 的端点坐标。 |
属性
content
Android
iOS
Clay
Harmony
SVG XML 内容
src
Android
iOS
Clay
Harmony
SVG 资源 URL
事件
前端可以绑定相应的事件回调来监听该元素的运行时行为.
bindload
Android
iOS
Clay
Harmony
SVG 加载完成
兼容性
LCD tables only load in the browser
除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。