SVGぼかし効果
注: Internet Explorer と Safari は SVG フィルターをサポートしていません。
<defs> と <filter>
すべてのインターネット SVG フィルターは <defs> 要素で定義されます。 <defs> 要素の定義は短く、特殊な要素 (フィルターなど) の定義が含まれています。
<filter> タグは SVG フィルターを定義するために使用されます。 <filter> タグは、グラフに適用するフィルターを定義するために必要な id 属性を使用します。
SVG <feGaussianBlur>
例 1
<feGaussianBlur> 要素はぼかし効果を作成するために使用されます:
SVG コードは次のとおりです:
例
<!DOCTYPE html> <html> <body> <p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </body> </html>
インスタンスを実行する »
「インスタンスの実行」ボタンをクリックして、オンライン インスタンスを表示します
Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィック プレビュー ソースを右クリックします)。
コード分析:
<filter>要素ID属性はフィルタの一意の名前を定義します
<feGaussianBlur>要素はぼかし効果を定義します
in="SourceGraphic" This部分は画像全体から効果を作成します
stdDeviation プロパティはぼかしの量を定義します
<rect> 要素の filter 属性は要素を「f1」フィルタにリンクするために使用されます
