<image>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
<image>
SVG 元素用于在 SVG 文档中包含图像。它可以显示位图或其他 SVG 文件。
SVG 软件必须支持的图像格式只有 JPEG、PNG 和其他 SVG 文件。并未定义有关动画 GIF 的行为。
使用 <image>
显示的 SVG 文件被视为图像:外部资源不会被加载、:visited
样式不会被应用,且它们不能有交互。要包含动态 SVG 元素,可以尝试用 <use>
引入外部 URL。要包含 SVG 文件并在其中运行脚本,请尝试在 <foreignObject>
中嵌入 <object>
。
备注:
HTML 规范定义 <image>
和 <img>
在用作 HTML 解析时是等效的。这种特定元素及其行为仅适用于 SVG 文档或内联 SVG。
使用上下文
属性
x
:图像水平方向上到原点的距离。y
:图像竖直方向上到原点的距离。width
:图像宽度。和 HTML<img>
不同,该属性是必需的。height
:图像高度。和 HTML<img>
不同,该属性是必需的。href
和xlink:href
已弃用 :指向图像文件的 URL。preserveAspectRatio
:控制图像的缩放比例。crossorigin
:定义 CORS 请求的凭据标志。decoding
:向浏览器提供关于是否应该同步或异步执行图像解码的提示。
DOM 接口
<image>
实现了 SVGImageElement
接口。
示例
SVG 中 PNG 图像的基本渲染:
SVG
html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<image href="mdn_logo_only_color.png" height="200" width="200" />
</svg>
结果
规范
Specification |
---|
Scalable Vector Graphics (SVG) 2 # ImageElement |
浏览器兼容性
BCD tables only load in the browser