1. 面向开发者的 Web 技术
  2. SVG：可缩放矢量图形
  3. 参考
  4. SVG 元素参考
  5. <image>

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

<image>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

<image> SVG 元素用于在 SVG 文档中包含图像。它可以显示位图或其他 SVG 文件。

SVG 软件必须支持的图像格式只有 JPEG、PNG 和其他 SVG 文件。并未定义有关动画 GIF 的行为。

使用 <image> 显示的 SVG 文件被视为图像：外部资源不会被加载、:visited 样式不会被应用，且它们不能有交互。要包含动态 SVG 元素，可以尝试用 <use> 引入外部 URL。要包含 SVG 文件并在其中运行脚本，请尝试在 <foreignObject> 中嵌入 <object>。

备注：HTML 规范定义 <image> 和 <img> 在用作 HTML 解析时是等效的。这种特定元素及其行为仅适用于 SVG 文档或内联 SVG。

使用上下文

类别图形元素、图形引用元素、可渲染元素
允许的内容任意数量、任意顺序的下列元素：
动画元素
描述性元素
<animate>、<animateMotion>、<animateTransform>、<discard>、<script>、<set>、<style>

属性

  • 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

浏览器兼容性

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content