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>
自己動手試一試 »
