SVG <image>
SVG 图片 - <image>
The <image> 元素用于在 SVG 中插入图片。
SVG 软件必须支持 JPEG、PNG 和其他 SVG 文件。
The <image> 元素有一些基本的属性来定位和调整图片的形状。
| 属性 | 描述 |
|---|---|
| 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>
自己试试 »
代码解释
- The
height属性定义图片的高度。 - The
width属性定义图片的宽度。 - The
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>
自己试试 »
