svgのfilterを使って文字列の図と地を反転する

div要素にsvgのfilterをかけて下の画像が文字図形の中を通して透けて見えるようにしてみた．例によってfirefoxのみで動作を確認．専門的にはなんて呼ぶのだろう？→マスクがけ文字？

文字の図と地を反転しています

面白い効果だがsvgの記述量は少なめ．例ではfeFloodで塗りつぶしているが，この部分をfeImageに変更することで画像を文字で切り抜くといった用途にも使えそう．

<svg style="height: 0; width: 0;">
 <defs>
  <filter id="flip">
   <feFlood flood-color="blue"/>
   <feComposite in2="SourceGraphic" operator="out"/>
  </filter>
 </defs>
</svg>

<div style="
    background-image: url(http://www.konami.jp/products/dl_xbox_dracula_hd/images/charlotte.jpg); 
    height: 200px; overflow: hidden; width: 200px;">
<div style="
    filter: url(#flip); 
    font-size: 50px; 
    font-weight: bold; 
    height: 100%; width: 100%;">
文字の図と地を反転しています
</div>
</div>