<image>
Baseline 广泛可用 *
<image> SVG 元素用于在 SVG 文档中包含图像。它可以显示 栅格图像 文件或其他 SVG 文件。
SVG 软件必须支持的唯一图像格式是 JPEG、PNG 和其他 SVG 文件。动画 GIF 的行为未定义。
使用 <image> 显示的 SVG 文件会被 视为图像：外部资源不会被加载，:visited 样式 不会被应用，并且它们不可交互。要包含动态 SVG 元素，请尝试使用外部 URL 的 <use>。要包含 SVG 文件并在其中运行脚本，请尝试在 <foreignObject> 中使用 <object>。
注意： HTML 规范将 <image> 定义为 HTML 解析过程中的 <img> 的同义词。这个特定的元素及其行为仅适用于 SVG 文档或内联 SVG 内部。
使用语境
| 分类 | 图形元素，图形引用元素，可渲染元素 |
|---|---|
| 允许内容 | 可包含任意数量、任意顺序的下列元素 动画元素 描述性元素 <animate>, <animateMotion>, <animateTransform>, <discard>, <script>, <set>, <style> |
属性
x-
从原点开始水平定位图像。值类型：<length> | <percentage>；默认值：
0；可动画：是 y-
从原点开始垂直定位图像。值类型：<length> | <percentage>；默认值：
0；可动画：是 width-
图像渲染的宽度。与 HTML 的
<img>不同，此属性是必需的。值类型：<length> | <percentage>；默认值：auto；可动画：是 height-
图像渲染的高度。与 HTML 的
<img>不同，此属性是必需的。值类型：<length> | <percentage>；默认值：auto；可动画：是 href-
指向图像文件的 URL。值类型：<URL>；默认值：无；可动画：否
保持长宽比-
控制图像的缩放方式。值类型：(
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)？；默认值：xMidYMid meet；可动画：是 crossorigin-
定义 CORS 请求的凭据标志的值。值类型：[
anonymous|use-credentials]？；默认值：无；可动画：是 decoding-
为浏览器提供有关应同步还是异步执行图像解码的提示。值类型：
async | sync | auto；默认值：auto；可动画：是 fetchpriority实验性 非标准-
提供一个提示，用于指示在获取外部图像时应使用的相对优先级。允许的值
xlink:href已废弃-
指向图像文件的 URL。值类型：<URL>；默认值：无；可动画：否
DOM 接口
此元素实现了 SVGImageElement 接口。
示例
SVG 中 PNG 图像的基本渲染
SVG
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<image href="mdn_logo_only_color.png" height="200" width="200" />
</svg>
结果
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # ImageElement |
浏览器兼容性
加载中…