<defs>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<defs> は SVG の要素で、後で使用するグラフィックオブジェクトを格納するために使われます。 <defs> 要素内に作成されたオブジェクトは直接レンダリングされません。オブジェクトを表示するには（例えば <use> 要素で）参照する必要があります。
グラフィックオブジェクトはどこからでも参照することができますが、これらのオブジェクトを <defs> 要素の内部で定義することは SVG コンテンツの理解しやすさを促進し、文書全体のアクセシビリティに有益です。
例
html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<!-- Some graphical objects to use -->
<defs>
<circle id="myCircle" cx="0" cy="0" r="5" />
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="20%" stop-color="gold" />
<stop offset="90%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my graphical objects -->
<use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
</svg>
使用コンテキスト
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # Head |
ブラウザーの互換性
Loading…