SVG <image>
SVG 图像 - <image>
SVG 中的 <image> 元素用于插入图像。
SVG 软件必须支持 JPEG、PNG 和其他 SVG 文件。
<image> 元素具有一些基本的属性来定位和塑形图像。
| Attribute | 描述 |
|---|---|
| width | 必需。 图像的宽度 |
| height | 必需。 图像的高度 |
| href | 必需。 图像的 URL |
| x | 图像左上角的 x 坐标 |
| y | 图像左上角的 y 坐标 |
插入图像
在此我们将在 SVG 中插入一个 .jpg 图像
这是 SVG 代码
示例
<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">
<image height="200" width="300" href="pulpitrock.jpg" />
</svg>
自己动手试一试 »
代码解释
height属性定义了图像的高度。width属性定义了图像的宽度。href属性定义了图像的 URL。
添加一些图形
在这里，我们将图像显示在一个蓝色圆圈的顶部，并在图像下方添加文本。
这是 SVG 代码
示例
<svg height="250" width="300" xmlns="http://www.w3.org/2000/svg">
<circle r="105" cx="150" cy="120" fill="lightblue" />
<image x="0" y="60" width="300" height="100" href="pulpitrock.jpg" />
<text x="84" y="180" fill="black">Pulpit Rock, Norway</text>
</svg>
自己动手试一试 »
