画像を描画
SVGで画像を描画するには、image要素を使用します。
構文
<image />属性
| 属性名 | 初期値 | 説明 |
|---|---|---|
| xlink:href | 画像を表示するファイルのパス。 SVG 1.1の場合はこの属性を使用し、SVG 2からは非推奨となるのでhref属性を使用する。 |
|
| href | 画像を表示するファイルのパス。 SVG 2からはこの属性を使用し、SVG 1.1まではxlink:href属性を使用する。 |
|
| width | 幅。 0を指定すると描画しない。 |
|
| height | 高さ。 0を指定すると描画しない。 |
|
| x | 0 | X軸（水平軸）の座標（位置）。 |
| y | 0 | Y軸（垂直軸）の座標（位置）。 |
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 150" width="200" height="150">
<image href="img/sample.jpg" width="320" height="240" x="20" y="30" />
</svg>