CSSフィルタと同じ効果をSVG使ってFirefoxにも適用させる

css3 の filter blur を firefox に適用したくてハマったのでメモ。

webkit は css3 の filter プロパティで対応。
firefox は svg の効果を参照適用。
IE は全滅。

style.css

.is-contrast-filtered   { -webkit-filter: contrast(10);       filter: url('#contrast');   }
.is-brightness-filtered { -webkit-filter: brightness(50%);    filter: url('#brightness'); }
.is-grayscale-filtered  { -webkit-filter: grayscale(1);       filter: url('#grayscale');  }
.is-saturate-filtered   { -webkit-filter: saturate(7);        filter: url('#saturate');   }
.is-hue-rotate-filtered { -webkit-filter: hue-rotate(180deg); filter: url('#hue-rotate'); }
.is-sepia-filtered      { -webkit-filter: sepia(100%);        filter: url('#sepia');      }
.is-invert-filtered     { -webkit-filter: invert(100%);       filter: url('#invert');     }
.is-blur-filtered       { -webkit-filter: blur(10px);         filter: url('#blur');       }

index.html

　
<!--
    scoped 属性を付与してインラインにもスタイル定義しないと
    何故か firefox に適用されない。何で？俺だけ？
-->
<style scoped>
  .is-contrast-filtered   { -webkit-filter: contrast(10);       filter: url('#contrast');   }
  .is-brightness-filtered { -webkit-filter: brightness(50%);    filter: url('#brightness'); }
  .is-grayscale-filtered  { -webkit-filter: grayscale(1);       filter: url('#grayscale');  }
  .is-saturate-filtered   { -webkit-filter: saturate(7);        filter: url('#saturate');   }
  .is-hue-rotate-filtered { -webkit-filter: hue-rotate(180deg); filter: url('#hue-rotate'); }
  .is-sepia-filtered      { -webkit-filter: sepia(100%);        filter: url('#sepia');      }
  .is-invert-filtered     { -webkit-filter: invert(100%);       filter: url('#invert');     }
  .is-blur-filtered       { -webkit-filter: blur(10px);         filter: url('#blur');       }
</style>


<!--
    適用したいフィルターの class を付与
-->
<img src="image.jpg" alt="" class="is-blur-filtered">


<!--
    css に定義済みの filter:url(id) プロパティは以下の id を参照している
-->
<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg" height="0">
  <defs>

  <filter id="contrast">
  <feGaussianBlur stdDeviation="1.5"/>
  <feComponentTransfer>
  <feFuncR type="discrete" tableValues="0 .5 1 1"/>
  <feFuncG type="discrete" tableValues="0 .5 1"/>
  <feFuncB type="discrete" tableValues="0"/>
  </feComponentTransfer>
  </filter>

  <filter id="brightness">
  <feComponentTransfer>
  <feFuncR type="linear" slope="5"/>
  <feFuncG type="linear" slope="5"/>
  <feFuncB type="linear" slope="5"/>
  </feComponentTransfer>
  </filter>

  <filter id="grayscale">
  <feColorMatrix values="0.3333 0.3333 0.3333 0 0
  0.3333 0.3333 0.3333 0 0
  0.3333 0.3333 0.3333 0 0
  0 0 0 1 0"/>
  </filter>

  <filter id="saturate">
  <feComponentTransfer>
  <feFuncR tableValues="1 .33 .33" type="table"/>
  <feFuncG tableValues=".33 1 .33" type="table"/>
  <feFuncB tableValues=".33 .33 1" type="table"/>
  </feComponentTransfer>
  </filter>

  <filter id="hue-rotate">
  <feComponentTransfer>
  <feFuncR type="table" tableValues="1 0"/>
  <feFuncG type="table" tableValues="1 0"/>
  <feFuncB type="table" tableValues="1 0"/>
  </feComponentTransfer>
  </filter>

  <filter id="sepia">
  <feComponentTransfer>
  <feFuncR tableValues="0.15 .25" type="table"/>
  <feFuncG tableValues=".01 .25" type="table"/>
  <feFuncB tableValues="0 .09" type="table"/>
  </feComponentTransfer>
  </filter>

  <filter id="invert">
  <feComponentTransfer>
  <feFuncR type="table" tableValues="1 0"/>
  <feFuncG type="table" tableValues="1 0"/>
  <feFuncB type="table" tableValues="1 0"/>
  </feComponentTransfer>
  </filter>

  <filter id="blur">
  <feGaussianBlur stdDeviation="10" result="outBlur"/>
  </filter>

  </defs>
</svg>