図形に画像を適用する
SVGで図形に画像を適用するには、feImage要素を使用します。
構文
<feImage />属性
| 属性名 | 初期値 | 説明 |
|---|---|---|
| xlink:href | 画像を表示するファイルのパス。 ハッシュフラグメントとして指定する。 SVG 1.1の場合はこの属性を使用し、SVG 2からは非推奨となるのでhref属性を使用する。 |
|
| href | 画像を表示するファイルのパス。 ハッシュフラグメントとして指定する。 SVG 2からはこの属性を使用し、SVG 1.1まではxlink:href属性を使用する。 |
|
| preserveAspectRatio | xMidYMid meet | 縦横比の維持するかどうか、または維持の仕方。 ※ 指定の仕方は何れ掲載 |
| width | 幅。 preserveAspectRatio属性の指定された値によっては指定した値は無効になる場合がある。 0を指定すると描画しない。 |
|
| height | 高さ。 preserveAspectRatio属性の指定された値によっては指定した値は無効になる場合がある。 0を指定すると描画しない。 |
|
| x | X軸（水平軸）の座標（位置）。 | |
| y | Y軸（垂直軸）の座標（位置）。 |
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter id="sample1">
<feImage href="img/draw-image.jpg">
</filter>
</defs>
<rect width="200" height="150" filter="url(#sample1)" />
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<defs>
<filter id="sample2">
<feImage href="img/draw-image.jpg">
</filter>
</defs>
<circle cx="100" cy="75" r="75" filter="url(#sample2)" />
</svg>