<svg>

svg 元素是一个容器，它定义了一个新的坐标系和视窗。它用作 SVG 文档的最外层元素，但它也可以用来将 SVG 片段嵌入到 SVG 或 HTML 文档中。

注意： xmlns 属性仅在SVG 文档的最外层 svg 元素上，或在使用 XML 序列化方式的 HTML 文档中才需要。对于内部 svg 元素或使用 HTML 序列化方式的 HTML 文档，它是多余的。

示例

嵌套 `svg` 元素

此示例显示嵌套的 svg 元素不需要 xmlns 属性。

html,
body,
svg {
  height: 100%;
}

html

<svg
  viewBox="0 0 300 100"
  xmlns="http://www.w3.org/2000/svg"
  stroke="red"
  fill="grey">
  <circle cx="50" cy="50" r="40" />
  <circle cx="150" cy="50" r="4" />

  <svg viewBox="0 0 10 10" x="200" width="100">
    <circle cx="5" cy="5" r="4" />
  </svg>
</svg>

使用动态视窗单位

在此示例中，svg 元素上的 height 和 width 属性使用动态视窗值 60vmin 设置，它相当于视窗宽度或高度的 60%，取较小的值。

<div class="resizer">
  <iframe
    class="resized"
    srcdoc="

html

<svg viewbox='0 0 400 400' xmlns='http://www.w3.org/2000/svg' height='60vmin' width='60vmin'>
  <rect x='0' y='0' width='50%' height='50%' fill='tomato' opacity='0.75' />
  <rect x='25%' y='25%' width='50%' height='50%' fill='slategrey' opacity='0.75' />
  <rect x='50%' y='50%' width='50%' height='50%' fill='olive' opacity='0.75' />
  <rect x='0' y='0' width='100%' height='100%' stroke='cadetblue' stroke-width='0.5%' fill='none' />
</svg>

  "></iframe>
</div>

.resizer {
  display: flex;
  margin: 1rem;
  padding: 0;
  resize: both;
  overflow: hidden;
  border: 5px dotted red;
  height: 400px;
}
.resizer > .resized {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0;
}

要更改 iframe 的尺寸，请尝试从右下角调整带点红边的尺寸。

属性

baseProfile 已弃用: 文档所需的最小 SVG 语言配置文件。值类型: <string> ; 默认值: 无；可动画: 否
height: 矩形视窗的显示高度。（不是其坐标系的高度。）值类型: <length>|<percentage> ; 默认值: auto；可动画: 是
preserveAspectRatio: 如果 svg 片段以不同的纵横比显示，它必须如何变形。值类型: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; 默认值: xMidYMid meet；可动画: 是
version 已弃用: 用于元素内部内容的 SVG 版本。值类型: <number> ; 默认值: 无；可动画: 否
viewBox: 当前 SVG 片段的 SVG 视窗坐标。值类型: <list-of-numbers> ; 默认值: 无；可动画: 是
width: 矩形视窗的显示宽度。（不是其坐标系的宽度。）值类型: <length>|<percentage> ; 默认值: auto；可动画: 是
x: svg 容器的显示 x 坐标。对最外层 svg 元素没有影响。值类型: <length>|<percentage> ; 默认值: 0；可动画: 是
y: svg 容器的显示 y 坐标。对最外层 svg 元素没有影响。值类型: <length>|<percentage> ; 默认值: 0；可动画: 是

注意： 从 SVG2 开始，x、y、width 和 height 是几何属性，这意味着这些属性也可以用作 CSS 属性。

使用环境

类别	容器元素、结构元素
允许的内容	以下任何元素，按任何顺序动画元素描述性元素形状元素结构元素渐变元素 `<a>`, `<clipPath>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

规范

规范
可缩放矢量图形 (SVG) 2 # 新建文档

浏览器兼容性

BCD 表格仅在浏览器中加载

示例

嵌套 svg 元素

使用动态视窗单位

属性

使用环境

规范

浏览器兼容性

嵌套 `svg` 元素