diff options
Diffstat (limited to 'files/ja/web/svg/element/defs/index.html')
| -rw-r--r-- | files/ja/web/svg/element/defs/index.html | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/files/ja/web/svg/element/defs/index.html b/files/ja/web/svg/element/defs/index.html new file mode 100644 index 0000000000..e9fb934e13 --- /dev/null +++ b/files/ja/web/svg/element/defs/index.html @@ -0,0 +1,85 @@ +--- +title: defs +slug: Web/SVG/Element/defs +tags: + - SVG + - SVG Container +translation_of: Web/SVG/Element/defs +--- +<div>{{SVGRef}}</div> + +<p>SVGでは、後で再利用できるよう描画オブジェクトを定義します。参照される要素は、可能なかぎり<code>defs</code>要素内で定義されることが推奨されています。<code>defs</code>要素内でこれらの要素を定義することは、SVGの要素の可読性を向上させ、ひいては操作性をも向上させます。<code>defs</code>要素の描画要素は、そのままでは描画されません。ビューポート上で描画したい場所へそれらの要素を描画するために、{{ SVGElement("use") }}要素を使用します。</p> + +<h2 id="利用コンテキスト">利用コンテキスト</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<pre class="brush: xml"><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> +</pre> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件的処理属性（コンディショナルプロセッシング属性）</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">描画イベント属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="スペシフィック属性">スペシフィック属性</h3> + +<p><em>スペシフィック属性はありません</em></p> + +<h2 id="DOM_インタフェース">DOM インタフェース</h2> + +<p>この要素は <code><a href="/en/DOM/SVGDefsElement" title="en/DOM/SVGDefsElement">SVGDefsElement</a></code> インタフェースを実装しています。</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "struct.html#Head", "<defs>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#Head", "<defs>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + + + +<p>{{Compat("svg.elements.defs")}}</p> |