<svg>

Baseline 广泛可用 *

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

<svg> SVG 元素是一个容器,它定义了一个新的坐标系和 视口。它用作 SVG 文档的最外层元素,但也可以用在 SVG 或 HTML 文档中嵌入 SVG 片段。

注意: xmlns 属性仅在 SVG 文档的最外层 svg 元素上是必需的,或者在 XML 序列化的 HTML 文档中使用。对于内部的 svg 元素或 HTML 序列化的 HTML 文档则不需要。

使用语境

分类容器元素,结构元素
允许内容可包含任意数量、任意顺序的下列元素
动画元素
描述性元素
形状元素
结构元素
渐变元素
<a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

属性

baseProfile 已弃用

文档所需的最低 SVG 语言配置文件。值类型<string>默认值:无;可动画

height

矩形视口的显示高度。(不是其坐标系的高度。)值类型<length> | <percentage>默认值auto可动画

保持长宽比

如果 svg 片段以不同的 纵横比 显示,则必须如何变形。值类型:(none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?;默认值xMidYMid meet可动画

version 已弃用

用于元素内部内容的 SVG 版本。值类型<number>默认值:无;可动画

视图框

当前 SVG 片段的 SVG 视口坐标。值类型<list-of-numbers>默认值:无;可动画

width

矩形视口的显示宽度。(不是其坐标系的宽度。)值类型<length> | <percentage>默认值auto可动画

x

SVG 容器的显示 x 坐标。对最外层的 svg 元素无影响。值类型<length> | <percentage>默认值0可动画

y

SVG 容器的显示 y 坐标。对最外层的 svg 元素无影响。值类型<length> | <percentage>默认值0可动画

注意: 从 SVG2 开始,xywidthheight几何属性,这意味着这些属性也可以用作 CSS 属性。

DOM 接口

此元素实现了 SVGSVGElement 接口。

示例

嵌套的 svg 元素

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

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 元素上的 heightwidth 属性使用动态视口值 60vmin 设置,它等同于视口宽度或高度的 60%,以较小者为准。

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 的尺寸,请尝试从右下角调整虚线红框的大小。

规范

规范
Scalable Vector Graphics (SVG) 2
# NewDocument

浏览器兼容性