2012年3月19日月曜日

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>

0 件のコメント:

コメントを投稿