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> |
例
<svg width="80px" height="30px" viewBox="0 0 80 30"
xmlns="http://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>
属性
グローバル属性
- 条件的処理属性（コンディショナルプロセッシング属性） »
- コア属性 »
- 描画イベント属性 »
- プレゼンテーション属性 »
classstyleexternalResourcesRequiredtransform
スペシフィック属性
スペシフィック属性はありません
DOM インタフェース
この要素は SVGDefsElement インタフェースを実装しています。
仕様
| 仕様 | 状態 | コメント |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 <defs> の定義 |
勧告候補 | 変更なし |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) <defs> の定義 |
勧告 | 最初の定義 |
ブラウザ互換性
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
defs | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1.5 | IE 完全対応 9 | Opera 完全対応 8 | Safari 完全対応 3.1 | WebView Android 完全対応 3 | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 3.1 | Samsung Internet Android 完全対応 1.0 |
凡例
- 完全対応
- 完全対応