エフェクトの使い方 (filter) [SVG]

エフェクトの使い方 (filter)

参考：

SVG のフィルタ – Qiita

HTML コンテンツへ SVG 効果を適用する | MDN

画像効果 | defghi1977

SVG Filters | Jenkov.com

Overcoming a couple of issues with SVG filter effects | iamsteve

filter

参考：

filter | MDN

Can I use

参考：

SVG filters – Can I use… Support tables

feGaussianBlur

<defs>
  <filter
    id="blur"
    x="-50%"
    y="-50%"
    width="200%"
    height="200%">
    <feGaussianBlur
      in="SourceGraphic"
      stdDeviation="5"/>
  </filter>
</defs>

<style>
  .blur { filter: url(#blur); }
</style>

参考：

背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス

<feGaussianBlur> | MDN

stdDeviation | MDN

SVG blur vs CSS blur | CodePen

Styling (blur) a SVG with class via CSS – Stack Overflow

feGaussianBlur is not working properly on Safari or IE? – Stack Overflow

filterUnits

参考：

filterUnits | MDN

SVG shadow cut off – Stack Overflow

SVG filter using mixed percentage and fixed unit dimensions does not work – Stack Overflow

enable-background

**DEPRECATED** (SVG 2 で廃止)

参考：

svg の enable-background=”new” 属性の意味 | ゲームミュージックと生存確認をかねた画期的な

enable-background | MDN

What exactly does the enable-background attribute do? – Stack Overflow

What’s the correct structure for ‘enable-background’ of the SVG element? – Stack Overflow

luminanceToAlpha

参考：

SVG Luminance to Alpha | CodePen

Gooey effect

参考：

Gooey effect | bl.ocks.org

SVG feGaussianBlur and feColorMatrix filters not working in Chrome? – Stack Overflow

iOS スタイルのブラーエフェクト

参考：

SVG Partial Blur and iOS Style Translucency | eleqtriq