他の図形要素を複製(再利用)し描画
SVGで他の図形要素を複製(再利用)し描画するには、use
要素を使用します。
構文
<use />
属性
属性名 | 説明 |
---|---|
xlink:href | 複製(再利用)対象要素のID名。 SVG 1.1の場合はこの属性を使用し、SVG 2からは非推奨となるのでhref属性を使用する。 |
href | 複製(再利用)対象要素のID名。 SVG 2からはこの属性を使用し、SVG 1.1まではxlink:href属性を使用する。 |
width | 横幅。 省略すると元となる図形要素のwidth属性の価を引き継ぐ。 |
height | 高さ。 省略すると元となる図形要素のwidth属性の価を引き継ぐ。 |
x | viewportの基点からのX軸(水平軸)の位置。 省略すると元となる図形要素のwidth属性の価を引き継ぐ。 |
y | viewportの基点からのY軸(垂直軸)の位置。 省略すると元となる図形要素のwidth属性の価を引き継ぐ。 |
各属性は元の図形要素に指定してある同じ属性を指定することができます。
サンプルコードとデモ
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">
<rect width="50" height="50" x="10" id="sample" />
<use xlink:href="#sample" x="60" y="20" fill="#d00" />
</svg>