SVGチュートリアル

SVG要素

SVG<defs>要素

SVGの<defs>要素は、SVG画像内で再利用可能な定義を埋め込むために使用されます。例えば、SVG形状をグループ化して、それを単一の形状として繰り返し使用することができます。

defsサンプル

これはシンプルな<defs>要素の例です：

サンプル

<svg>
　　　　<defs>
　　　　　　　　<g>
　　　　　　　　　　　　<rect x="100" y="100" width="100" height="100"　/>
　　　　　　　　　　　　<circle cx="100" cy="100"r="100"　/>
　　　　　　　　</g>
　　　　</defs>
</svg>

テストして‹を見てみましょう/›

SVGの<defs>要素内で定義された形状は、SVG画像に表示されません。表示する前に、<use>要素で参照する必要があります。以下はその例です：

サンプル

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<g id="shape">
　　　　　　　　　　　　<rect x="0" y="0" width="50" height="50"></rect>
　　　　　　　　　　　　<circle cx="0" cy="0" r="50"></circle>
　　　　　　　　</g>
　　　　</defs>
　　　　<use xlink:href="#shape" x="50" y="50"></use>
　　　　<use xlink:href="#shape" x="200" y="50"></use>
　　　　<circle cx="50"cy="50"r="5"style="fill:#0000ff;"/circle>
　　　　<circle cx="200"cy="50"r="5"style="fill:#0000ff;"/circle>
</svg>

テストして‹を見てみましょう/›

g要素を参照できる前に、ID属性にIDを設定する必要があります。<use>要素はxlink:href属性を通じてg要素を参照します。属性値のID前に#があることに注意してください。

<use>要素は、xとy属性を通じて何処に形状を繰り返し表示するかを指定します。ただし、<g>要素内の形状は0,0に位置します。これ是因为、それらの位置は<use>要素に指定された位置に追加されています。

実行後の画像効果：

青点は例の中にありません。それらを追加して、2つの<use>要素のxとyを表示するためです。

defs要素でどのような要素を定義できますか？

以下の要素を<defs>要素に追加できます：

どんな形状要素（rect、lineなど）
g
symbol

SVG<symbol>要素 SVG<a>要素