<svg>
Baseline 广泛可用 *
<svg>
SVG 元素是一个容器,它定义了一个新的坐标系和 视口。它用作 SVG 文档的最外层元素,但也可以用在 SVG 或 HTML 文档中嵌入 SVG 片段。
注意: xmlns
属性仅在 SVG 文档的最外层 svg
元素上是必需的,或者在 XML 序列化的 HTML 文档中使用。对于内部的 svg
元素或 HTML 序列化的 HTML 文档则不需要。
使用语境
属性
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 开始,x
、y
、width
和 height
是几何属性,这意味着这些属性也可以用作 CSS 属性。
DOM 接口
此元素实现了 SVGSVGElement
接口。
示例
嵌套的 svg
元素
此示例显示嵌套的 svg
元素不需要 xmlns
属性。
<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%,以较小者为准。
<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 |
浏览器兼容性
加载中…