图片

前端教程SVG

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

<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-矢量图片：

相关 DOM 接口

• <image> SVGImageElement

小结

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