SVG 急速入门教程（07.绘制图片）

上一篇：绘制文本

本节我们介绍如何使用 <image> 元素绘制图片。

1. <image>

<image> 用于绘制光栅图片或其他 SVG 矢量图。

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <image href="xxxx.png" x="0" y="0" height="100%" width="100%" preserveAspectRatio="xxx" />
</svg>

• href 图片的 URL
• x y 图片左上角坐标
• width height 图片的宽度和高度
• preserveAspectRatio 图片缩放方式，类似于 CSS object-fit，详细的介绍会在后面章节学习。

示例1-光栅图片：

示例2-矢量图片：

2. 相关 DOM 接口

• <image> SVGImageElement

3. 小结

本节讲解了有关绘制文本的内容，下一节我们讲解如何在 SVG 里嵌入普通 HTML 内容。

下一篇：嵌入 HTML