defs

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>

属性

グローバル属性

スペシフィック属性

スペシフィック属性はありません

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

この表はここを元にしています。

関連

ドキュメントのタグと貢献者

 このページの貢献者: Akihiro_0326, Sebastianz, eurocated, Shunter1112
 最終更新者: Akihiro_0326,