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

セキュリティ上の理由でいくつかのブラウザーは、同一生成元ポリシーを 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> の定義
勧告 初期の定義

ブラウザー実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,