SVGでは、後で再利用できるよう描画オブジェクトを定義します。参照される要素は、可能なかぎりdefs
要素内で定義されることが推奨されています。defs
要素内でこれらの要素を定義することは、SVGの要素の可読性を向上させ、ひいては操作性をも向上させます。defs
要素の描画要素は、そのままでは描画されません。ビューポート上で描画したい場所へそれらの要素を描画するために、<use>
要素を使用します。
利用コンテキスト
カテゴリ | コンテナ要素 、 ストラクチャ要素 |
---|---|
許可された内容 | 任意の数、任意の順で以下の要素を配置可能: アニメーション要素 説明的要素 図形要素 構造的要素 グラデーション要素 <a> 、 <altGlyphDef> 、 <clipPath> 、 <color-profile> 、 <cursor> 、 <filter> 、 <font> 、 <font-face> 、 <foreignObject> 、 <image> 、 <marker> 、 <mask> 、 <pattern> 、 <script> 、 <style> 、 <switch> 、 <text> 、 <view> |
Example
<svg width="80px" height="30px" viewBox="0 0 80 30" xmlns="https://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient01"> <stop offset="20%" stop-color="#39F" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient> </defs> <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)" /> </svg>
属性
グローバル属性
- 条件的処理属性(コンディショナルプロセッシング属性) »
- コア属性 »
- 描画イベント属性 »
- プレゼンテーション属性 »
class
style
externalResourcesRequired
transform
スペシフィック属性
スペシフィック属性はありません
DOM インタフェース
この要素は SVGDefsElement
インタフェースを実装しています。
ブラウザ互換性
ブラウザ | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基本サポート | 1.0 | 1.5 (1.8) | 9.0 | 8.0 | 3.0.4 |
ブラウザ | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | 3.0 | 1.0 (1.8) | 未サポート | (有) | 3.0.4 |
この表はここを元にしています。