SVGブラー - ガウスぼかし2024 年の最新の入門チュートリアル。このコースでは <DEFS>と<フィルター>,SVG <feGaussianBlur>,例1,例, について学習できます。
SVGブラー - ガウスぼかし
注:Internet ExplorerやSafariはSVGフィルタをサポートしていません!
<DEFS>と<フィルター>
SVGは<DEFS>要素で定義されているすべてのインターネットをフィルタリングします。 <DEFS>要素は、短い定義し、定義(フィルタなど)特殊な要素が含まれています。
<フィルター>タグは、SVGフィルタを定義するために使用されます。 <フィルタ>フィルタのグラフィカルアプリケーションを定義するために必要なid属性を持つタグ?
SVG <feGaussianBlur>
例1
<FeGaussianBlur>要素は、ぼかし効果を作成するために使用されます:
ここではSVGのコードは次のとおりです。
例
<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>
»をお試しください オペラユーザーの場合: ビューSVGファイル (プレビューソースSVGグラフィック上で右クリックします)。
コード解析:
- 名前だけの<filter>要素のid属性は、フィルタを定義します
- <FeGaussianBlur>要素は、ぼかしを定義します
- = "SourceGraphicと」のこのセクションでは、画像全体で作成されたエフェクトを定義します
- stdDeviation属性は、ぼかしの量を定義します
- フィルタのプロパティ<RECT>要素は、「F1」フィルタに要素をリンクするために使用されます