再利用するための定義
SVGで図形やグラデーションなどを再利用するためのオブジェクトとして定義するには、defsを使用します。
defs要素の中に定義されたオブジェクトは描画をせずに定義のみを行います。
定義したオブジェクトを利用するには、次のページをそれぞれご覧ください。
- 図形：他の図形要素を複製（再利用）し描画
- 線形グラデーション：図形に線形のグラデーションを付ける
構文
<defs>
定義オブジェクト
...
</defs>定義可能な要素
定義可能な許可されている要素は次の通りです。
- 図形要素（
<rect>など） - グラデーション関連要素（
<linearGradient>など） - アニメーション関連要素（
<animate>など） - 説明関連要素（
<desc>など） - 構造関連要素（
<g>など）
サンプルコードとデモ
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">
<defs>
<circle cx="100" cy="75" r="70" id="sample" />
</defs>
<use xlink:href="#sample" fill="#d00" />
</svg>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">
<defs>
<linearGradient id="sample">
<stop offset="0%" stop-color="#f00" />
<stop offset="50%" stop-color="#0f0" />
<stop offset="100%" stop-color="#00f" />
</linearGradient>
</defs>
<rect width="200" height="150" rx="30" ry="30" fill="url(#sample)" />
</svg>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">
<defs>
<circle cx="100" cy="75" r="70" id="sample" fill="url(#sample-fill)" />
<radialGradient id="sample-fill">
<stop offset="0%" stop-color="#f00" />
<stop offset="100%" stop-color="#00f" />
</radialGradient>
</defs>
<use xlink:href="#sample" />
</svg>