use

<use> 要素は SVG ドキュメントの中からノード取り出して、別の場所に複製します。効果は、あたかもノードが見えない DOM に完全にクローンされ、HTML5 の template要素 によく似ている、use 要素がある場所に貼り付けられたかのように同じになります。クローンされたノードは見えないので、CSS を使って use 要素とその隠れた子孫要素にスタイル付けをする場合は注意が必要です。CSS 属性がクローンされた隠れた要素に継承されることは保証されないので、属性の継承を CSS の継承を用いて明示することが必要です。

セキュリティ上の理由でいくつかのブラウザーは、同一生成元ポリシーを use 要素に適用して、xlink:href 属性の異なる生成元の URI を読み込むことを拒否することがあります。

使用可能な場所

カテゴリグラフィックス要素 、 グラフィクス参照要素 、 ストラクチャ要素
許可された内容任意の数、任意の順で以下の要素を配置可能:
アニメーション要素
説明的要素

属性

グローバル属性

専用属性

DOM インターフェイス

この要素は SVGUseElement インターフェイスを実装します。

<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    .classA {
      fill: red;
    }
  </style> 
  <defs>
    <g id="Port">
      <circle style="fill: inherit;" r="10"/>
    </g>
  </defs>
 
  <text y="15">black</text>
  <use x="50" y="10" xlink:href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill: blue;"/>
</svg>

仕様

仕様 状態 コメント
Scalable Vector Graphics (SVG) 2
<use> の定義
勧告候補
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<use> の定義
勧告 初期の定義

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有) (有) (有) (有) (有)
外部 URI からの読み込み (有) (有) 未サポート (有) (有)
data: URI からの読み込み ? 10.0 (10.0) ? ? ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) ? (有) (有)
外部 URI からの読み込み (有) (有) ? (有) (有)
data: URI からの読み込み (有) (有) ? (有) (有)

ドキュメントのタグと貢献者

 このページの貢献者: momdo, Sebastianz, twe, teoli
 最終更新者: momdo,