svgのfilterをcss経由でhtml文字列に適用する

svgのもつfilter機能を用いると，cssだけでは実現が難しい効果も比較的容易に創りだすことが出来る．

firefoxで見ると，このテキストの周囲にうるさい効果が掛かります．

似たような効果としてはtext-shadowが挙げられるが，単なる影なので濃い色で文字を囲むといった用途には使いにくい．

css3のtext-shadowは単なる影なので薄まる．

確かにsvgを記述するのは面倒だし，対応するブラウザが少ないんだけれど，強力なフィルタ機能を利用できるのは魅力．

<div id="height:auto;font-spread-text" style="color: black; filter: url(#font-spread); font-size: 30px;">
firefoxで見ると，このテキストの周囲にうるさい効果が掛かります．</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <defs>
  <filter id="font-spread">
   <feMorphology in="SourceAlpha" operator="dilate" radius="4" result="dilated1"/>
   <feGaussianBlur in="dilated1" stdDeviation="1" result="blured1"/>
   <feComponentTransfer in="blured1" result="backImage1">
    <feFuncR type="linear" slope="0" intercept="1"/>
    <feFuncG type="linear" slope="0" intercept="1"/>
   </feComponentTransfer>
   <feMorphology in="SourceAlpha" operator="dilate" radius="2" result="dilated2"/>
   <feGaussianBlur in="dilated2" stdDeviation="1" result="blured2"/>
   <feComponentTransfer in="blured2" result="backImage2">
    <feFuncR type="linear" slope="0" intercept="1"/>
   </feComponentTransfer>
   <feMerge>
   <feMergeNode in="backImage1"/>
   <feMergeNode in="backImage2"/>
   <feMergeNode in="SourceGraphic"/>
   </feMerge>
  </filter>
 </defs>
</svg>