image
SVG 文档中的 SVG 元素包含图像信息。它表现为图像文件或者其他 SVG 文件。
SVG 图像格式转换软件支持 JPEG、PNG 格式,是否支持动图 GIF 不明确。
SVG 文件是这样的一种图像:不被当做外部资源加载,不可以用 :visited 样式,不能有交互。使用动态 SVG 元素,可以用<use>引入外部的 URL。使用 SVG 文件并添加 scripts 在里面,可以用<object> 放在 <foreignObject>中。
注意:HTML 规范中定义<image>和<img>在解析时是等效的。这种规范只适用于 SVG 文件或 SVG 区块内。
用法
属性
全局属性
专有属性
x
:图像水平方向上到原点的距离y
:图像竖直方向上到原点的距离width
:图像宽度。和 HTML 的 <img> 不同,该属性是必须的height
:图像高度。和 HTML 的 <img> 不同,该属性是必须的href (en-US)
或xlink:href (en-US)
:图像的 URL 指向preserveAspectRatio
:控制图像比例
DOM 接口
该元素实现 SVGImageElement
接口。
示例
在 SVG 对象中基本呈现 PNG 图像:
html
<svg
width="100%"
height="100%"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image
xlink:href="/files/2917/fxlogo.png"
x="0"
y="0"
height="100"
width="100" />
</svg>
规范
Specification |
---|
Scalable Vector Graphics (SVG) 2 # ImageElement |
浏览器兼容性
BCD tables only load in the browser