defs
SVG では、後で再利用できるよう描画オブジェクトを定義します。参照される要素は、可能なかぎりdefs
要素内で定義されることが推奨されています。defs
要素内でこれらの要素を定義することは、SVG の要素の可読性を向上させ、ひいては操作性をも向上させます。defs
要素の描画要素は、そのままでは描画されません。ビューポート上で描画したい場所へそれらの要素を描画するために、<use>
要素を使用します。
利用コンテキスト
カテゴリー | コンテナー要素、構造的要素 |
---|---|
許可されている内容 | 任意の数、任意の順序の以下の要素。 アニメーション要素 説明的要素 図形要素 構造的要素 グラデーション要素 <a> 、<clipPath> 、<color-profile> 、<cursor> (en-US)、<filter> (en-US)、<font> (en-US)、<font-face> (en-US)、<foreignObject> 、<image> 、<marker> (en-US)、<mask> 、<pattern> 、<script> 、<style> (en-US)、<switch> 、<text> 、<view> (en-US) |
例
<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>
属性
グローバル属性
スペシフィック属性
スペシフィック属性はありません
DOM インタフェース
この要素は SVGDefsElement
インタフェースを実装しています。
仕様
Specification |
---|
Scalable Vector Graphics (SVG) 2 # Head |
ブラウザ互換性
BCD tables only load in the browser