use

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

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

使用可能な場所

属性

グローバル属性

• 条件処理属性 »
• コア属性 »
• グラフィカルイベント属性 »
• プレゼンテーション属性 »
• XLink 属性 »
• class
• style
• externalResourcesRequired
• transform

専用属性

• x
• y
• width
• height
• xlink:href

DOM インターフェイス

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

例

<svg width="80" height="80" xmlns="https://www.w3.org/2000/svg"
    xmlns:xlink="https://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>

仕様

ブラウザー実装状況