他の図形要素を複製(再利用)し描画

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>

SVG逆引きリファレンス一覧へ戻る