<use>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<use> 要素は SVG 文書の中からノード取り出して、別の場所に複製します。

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
  <!--
stroke="red" will be ignored here, as stroke was already set on myCircle.
Most attributes (except for x, y, width, height and (xlink:)href)
do not override those set in the ancestor.
That's why the circles have different x positions, but the same stroke value.
  -->
</svg>

効果は、あたかもそのノードが非公開の DOM に配下を含めて複製され、 HTML5 の template 要素のように、 use 要素がある場所に貼り付けられたかのように同じになります。

use のほとんどの属性は、 use から参照される要素に既にある属性を上書きしません。 (これは CSS のスタイル属性がカスケードで「以前」に設定されたものを上書きする方法とは異なります)。 use 要素にあるx, y, width, height, href の各属性のみが参照される要素に設定されているものを上書きします。ただし、参照される要素に設定されていない他のすべての属性は、 use 要素に適用され得ます。

クローンされたノードは公開されないので、 CSS を使って use 要素とその隠れた子孫要素にスタイル付けをする場合は注意が必要です。CSS の継承を使用して明示的に要求しない限り、CSS 属性は隠された複製の DOM によって継承されることが保証されません。

セキュリティ上の理由で、ブラウザーは同一オリジンポリシーを use 要素に適用して、 href 属性にあるオリジンをまたがる URL を読み込むことを拒否することがあります。現在のところ、 use 要素の同一オリジンポリシーを設定する方法は定義されていません。

警告: SVG 2 で xlink:href 属性が非推奨になり、 href に置き換えられました。詳しくは xlink:href のページを参照してください。ただし、 xlink:href はブラウザー間の互換性のために今でも実装する必要があります (下記の互換性一覧表を参照)。

属性

href: 複製する必要がある要素やフラグメントへの URL です。 値の型: <URL> ; 既定値: none; Animatable: yes
xlink:href: 非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
複製する必要がある要素やフラグメントの <IRI> 参照です。 値の型: <IRI> ; 既定値: none; Animatable: yes
x: この use 要素の X 座標です。 値の型: <coordinate> ; 既定値: 0; Animatable: yes
y: この use 要素の Y 座標です。 値の型: <coordinate> ; 既定値: 0; Animatable: yes
width: The width of the use element. 値の型: <length> ; 既定値: 0; Animatable: yes
height: The height of the use element. 値の型: <length> ; 既定値: 0; Animatable: yes

メモ: width および height は use 要素では効果がありません。ただし、参照される要素に viewbox がある場合を除きます。すなわち、 use が svg または symbol 要素を参照していた時だけ効果があります。

メモ: SVG2 から、 x, y, width, height は位置プロパティとなり、すなわちこれらの属性がその要素への CSS プロパティとしても使用することができるようになりました。

グローバル属性

コア属性: 特に: id, tabindex
スタイル属性: class, style
条件処理属性: 特に: requiredExtensions, systemLanguage
イベント属性: グローバルイベント属性, グラフィックイベント属性
プレゼンテーション属性: 特に: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
ARIA 属性: aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
XLink 属性: xlink:href, xlink:title

使用上の注意

カテゴリー	グラフィック要素、グラフィック参照要素、構造的要素
許可されている内容	任意の数、任意の順序の以下の要素。アニメーション要素説明的要素

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # UseElement

ブラウザーの互換性

BCD tables only load in the browser