use

<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> の定義
勧告 初期の定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
useChrome 完全対応 22Edge 完全対応 12Firefox 完全対応 4
補足
完全対応 4
補足
補足 For years, Firefox has suffered from a bug whereby it doesn't completely follow the use cascading rules (see bug 265894). A fix is documented by Amelia Bellamy-Royds on StackOverflow. The good news is that this is finally fixed as of Firefox 56.
IE 完全対応 ありOpera 完全対応 11.5Safari 完全対応 3WebView Android 完全対応 4Chrome Android 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 For years, Firefox has suffered from a bug whereby it doesn't completely follow the use cascading rules (see bug 265894). A fix is documented by Amelia Bellamy-Royds on StackOverflow. The good news is that this is finally fixed as of Firefox 56.
Opera Android 完全対応 11.5Safari iOS 完全対応 3Samsung Internet Android 完全対応 あり
Load from data: URIChrome 完全対応 22Edge 完全対応 ありFirefox 完全対応 4IE 未対応 なしOpera 完全対応 11.5Safari 完全対応 5.1WebView Android 完全対応 4Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 11.5Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 あり
Load from external URIChrome 完全対応 22Edge 完全対応 13Firefox 完全対応 4IE 未対応 なしOpera 完全対応 11.5Safari 完全対応 6.1WebView Android 完全対応 4.4Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 11.5Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 あり
heightChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
hrefChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 9WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 9Samsung Internet Android 完全対応 あり
widthChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
xChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
xlink:href
非推奨
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
yChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。