<use>
<use>
要素は SVG 文書の中からノード取り出して、別の場所に複製します。
<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
SVG2: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
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 プロパティとしても使用することができるようになりました。
グローバル属性
- コア属性
- スタイル属性
class
,style
- 条件処理属性
- イベント属性
- プレゼンテーション属性
-
特に:
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