在SVG导入图片

# image标签的用法

使用href属性来导入图片，x和y属性来控制图片的位置，width和height属性来控制图片的大小。

其他属性：

• preserveAspectRatio属性可以控制图片的长宽比，详见MDN。
• crossorigin属性可以控制图片的跨域访问，详见MDN。
• decoding属性可以控制图片的解码方式，详见MDN。

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <image
    href="https://avatars.githubusercontent.com/u/84616782?v=4"
    x="25" y="25" width="50" height="50"
  />
</svg>

# 裁剪图片

使用clip-path属性来裁剪图片，不明白可以看这一期「在SVG使用裁剪路径」。

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <clipPath id="round">
      <circle cx="50" cy="50" r="25" />
    </clipPath>
  </defs>
  <image
    href="https://avatars.githubusercontent.com/u/84616782?v=4"
    x="25" y="25" width="50" height="50"
    clip-path="url(#round)"
  />
</svg>