SVG中的image元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/22/SVG%E4%B8%AD%E7%9A%84image%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

作用
attribute

正文

作用

绘制图片

attribute

href

图片文件的 URL

示例：

1
2
3

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <image href="https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png"/>
</svg>

width

图片的宽度

示例：

1
2
3

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <image href="https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png" width="100"/>
</svg>

height

图片的高度

示例：

1
2
3

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <image href="https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png" height="100"/>
</svg>

x

四个顶点中最小的 x 值

示例：

1
2
3

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <image href="https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png" x="30"/>
</svg>

y

四个顶点中最小的 y 值

示例：

1
2
3

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <image href="https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png" y="30"/>
</svg>