SVGチュートリアル

SVG要素

SVG<use>要素

SVG <use>要素は、SVGドキュメント内の他の場所（<g>要素や<symbol>要素を含む）のSVG形状を再利用できます。再利用形状は<defs>要素内（形状は使用されるまで非表示）または外部で定義できます。

use例

これは<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>

テストを見て‹/›

この例では、<defs>要素内に定義された<g>要素が表示されています。これにより<g>は非表示になりますが、<use>要素が参照する場合を除いて。

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

<use>要素はxとy属性を通じて再利用する形状の表示位置を指定します。注意してください、<g>要素内の形状は0,0にあります。これを行ったのは、それらの位置が<use>要素に指定された位置に追加されているからです。

実行後の画像効果：

青い丸はこの例の一部ではありません。それらを追加したのは、2つの<use>要素のxとyを表示するためです。

defs要素外で形状を使用

<use>要素は、形状がユニークな値を持つid属性を持っている限り、SVG画像内のどの位置の要素でも再利用できます。以下は一例です：

例

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

テストを見て‹/›

この例では、<rect>要素を含む<g>要素を定義しています。それから、<use>要素を通じて<g>要素（ネストされた<rect>要素を含む）を再利用しています。

実行後の画像効果：

注意してください、元の形状と再利用版が同時に表示されます。この理由は、<defs>要素や<symbol>要素内に再利用する形状（<g>要素）が定義されていないためです。それで見えるのです。

同様に、青い丸が<use>要素の座標を表示します。

CSSスタイルの設定

オリジナルの形状にCSSスタイルが設定されていない場合、再利用する際にCSSスタイルを設定することができます。style属性内で設定するスタイルを指定するだけで良いです。これは例です：

例

<svg　width="500"　height="110">
　　<g　id="shape3">
　　　　　　<rect　x="0"　y="0"　width="50"　height="50"　/>
　　</g>
　　<use　xlink:href="#shape3"　x="100"　y="50"　style="fill:　#00ff00;"/>
　　<use　xlink:href="#shape3"　x="200"　y="50"　style="stroke:　#00ff00;　fill:　none;"/>
</svg>

テストを見て‹/›

元の形状にstyle属性が設定されていない場合の注意。その場合、デフォルトのスタイル（通常は黒色）でレンダリングされます。

SVG CSSスタイル SVG<symbol>要素