<DEFS>と<フィルター>
すべてのインターネットSVGフィルターは内で定義されている<defs>要素。 <defs>要素には、定義の短く、特別な要素の定義が含まれている(such as filters) 。
<filter>要素は、SVGフィルタを定義するために使用されます。 <filter>要素は、フィルタを識別し、必要なid属性を持っています。 グラフィックは、その後、使用するフィルタを指します。
SVG <feGaussianBlur>
例1
<feGaussianBlur>要素は、ぼかし効果を作成するために使用されます。
ここでSVGコードは次のとおりです。
例
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"
/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
»それを自分で試してみてください Code explanation:
- idの属性<filter>要素は、フィルタの固有の名前を定義します
- ぼかし効果を使用して定義されている<feGaussianBlur>要素
- in="SourceGraphic"部分は効果が素子全体のために作成されていることを定義します
- stdDeviation属性は、ぼかしの量を定義します
- filterの属性<rect>要素は、に要素をリンクする"f1"フィルタ