blog

SVG 学習シリーズ 3 - フィルタ、ぼかし効果、グラデーション

はじめに\n\nSVG フィルター\nSVG で利用できるフィルターは以下の通りです：\nfeBlend - 画像と組み合わせたフィルター。\n - カラーフィルタ変換用；\n;\n...

Jul 17, 2020 · 6 min. read
シェア

はじめに

SVG

SVGで利用可能なフィルタは次のとおりです：

feBlend - イメージと組み合わせたフィルター
feColorMatrix - カラーフィルター変換に使われる
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur - ガウスぼかし
feImage
feMerge
feMorphology
feOffset - 影のフィルタリング
feSpecularLighting
feTile
feTurbulence
feDistantLight - 照明フィルタリングに使われる
fePointLight - 照明フィルタリングに使われる
feSpotLight - 照明フィルタリングに使われる

SVGぼかし効果

全てのインターネット SVG フィルタは要素で定義されます。要素定義は短く、特殊な要素定義を含みます。

タグは SVG フィルタを定義するのに使われます。タグは必須の id 属性を用いてグラフィックに適用するフィルタを定義します。

<feGaussianBlur> 要素は、ぼかし効果を作成するために使用されます：

<svg xmlns="http://..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>
  • filter フィルター効果のコンテナ
  • feGaussianBlur SVG フィルタ.イメージのガウスぼかしを行います。
  • sourceGraphic このキーワードは、グラフィック要素自体がソース言語の元の入力として使用されることを示しま す。
  • stdDeviation属性はぼかしの量を定義します。
  • 要素のfilter属性は、要素を "f1 "フィルターにリンクするために使われます。

心的外傷

要素は影の効果を作るために使われます。このアイデアは、SVG グラフィックを xy 平面上で少し動かすことです。

最初の例では、矩形をオフセットし、オフセットしたイメージの上部をブレンドしています：

<svg xmlns="http://..org/2000"/svg" version="1.1">
 <defs>
 <filter id="f1" x="0" y="0" width="200%" height="200%">
 <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
 <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
 </filter>
 </defs>
 <rect width="90" height="90" stroke="green" stroke-width="3"
 fill="yellow" filter="url(#f1)" />
</svg>
  • 異なるブレンドモードを使って2つのオブジェクトを合成

オフセットイメージがぼやける

<svg xmlns="http://..org/2000"/svg" version="1.1">
 <defs>
 <filter id="f1" x="0" y="0" width="200%" height="200%">
 <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
 <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
 <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
 </filter>
 </defs>
 <rect width="90" height="90" stroke="green" stroke-width="3"
 fill="yellow" filter="url(#f1)" />
</svg>

黒い影を作ります：

<svg xmlns="http://..org/2000"/svg" version="1.1">
 <defs>
 <filter id="f1" x="0" y="0" width="200%" height="200%">
 <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
 <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
 <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
 </filter>
 </defs>
 <rect width="90" height="90" stroke="green" stroke-width="3"
 fill="yellow" filter="url(#f1)" />
</svg>
  • 要素の属性を "SourceAlpha "に変更することで、RGBAピクセル全体ではなく、アルファチャンネルの残留シャドウを使用します。

シャドウに色を重ねます。

<svg xmlns="http://..org/2000"/svg" version="1.1">
 <defs>
 <filter id="f1" x="0" y="0" width="200%" height="200%">
 <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
 <feColorMatrix result="matrixOut" in="offOut" type="matrix"
 values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
 <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
 <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
 </filter>
 </defs>
 <rect width="90" height="90" stroke="green" stroke-width="3"
 fill="yellow" filter="url(#f1)" />
</svg>
  • <feColorMatrix>フィルタはオフセットイメージを黒に近づけるために変換するのに使われます。 0.2' 行列の 3 つの値はすべて赤、 緑、 青のチャンネルを乗算して得られます。これらの値を減らすと色は黒に近づきます。

最終的な効果：

線形グラデーション

<linearGradient>要素は線形グラデーションを定義するために使われます。

<linearGradient>タブはその中に入れ子にする必要があります。ラベルは定義の略で、グラデーションのような特別な要素を定義することができます。

線形勾配は水平勾配、垂直勾配、角度勾配として定義できます：

  • y1とy2が等しく、x1とx2が異なる場合、水平グラデーションを作ることができます。
  • x1とx2が等しく、y1とy2が異なる場合、垂直グラデーションを作ることができます。
  • x1 と x2 が異なり、y1 と y2 が異なる場合、角度勾配を作成できます。

水平グラデーション：

<svg xmlns="http://..org/2000"/svg" version="1.1">
 <defs>
 <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
 <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
 </linearGradient>
 </defs>
 <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
  • <linearGradient>タグの id 属性は、グラデーションの一意な名前を定義します。
  • <linearGradient>ラベルの X1, X2, Y1, Y2 属性は、グラデーションの開始位置と終了位置を定義します。
  • グラデーションの色域は2色以上で構成できます。各色はラベルで指定されます。 offset属性は、グラデーションの開始位置と終了位置を定義するのに使われます。
  • fill 属性は楕円要素をこのグラデーションにリンクします。

垂直直線勾配

<svg xmlns="http://..org/2000"/svg" version="1.1">
 <defs>
 <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
 <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
 <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
 </linearGradient>
 </defs>
 <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

放射性グラデーション

<linearGradient>要素を使用して放射性勾配を定義します。

<linearGradient>タグの中に入れ子にする必要があります。

白から青の楕円形への放射性グラデーション：

<svg xmlns="http://..org/2000"/svg" version="1.1">
 <defs>
 <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
 <stop offset="0%" style="stop-color:rgb(255,255,255);
 stop-opacity:0" />
 <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
 </radialGradient>
 </defs>
 <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
  • <radialGradient>タグの id 属性は、グラデーションの一意の名前を定義します。
  • CX, CY, r属性で定義される一番外側の円と、Fx, Fy属性で定義される一番内側の円 = グラデーションの色範囲は2色以上で構成できます。各色はラベルで指定されます。 offset属性は、グラデーション色の開始と終了を定義するのに使われます。
  • fill 属性は楕円要素をこのグラデーションにリンクします。
Read next

javascriptは、文字を繰り返すことなく最長部分文字列を実装する

\n {\n let str = ''\n let arr = [].\n let target = [].\n for {\n もし

Jul 17, 2020 · 1 min read

JavaScriptのスタイルに関する5つの間違いをやめて、読みやすく保守性の高いコードを作ろう Quick Tips

Jul 17, 2020 · 4 min read

バルマー氏の後任は誰になるのか？マイクロソフトの社外CEO候補が5人に絞られる

Jul 17, 2020 · 1 min read

[MyBatis] SQLスプライシングプロシージャ

Jul 17, 2020 · 3 min read

フロントエンドエンジニアリング - Webpackのv3からWebpackのv5へのコアアーキテクチャの変更について話す。

Jul 17, 2020 · 6 min read

Nginxで、インストールしたNginxに動的にモジュールを追加する方法を理解するための記事。

Jul 17, 2020 · 2 min read