svgを使って、html要素をmask / clipする

※ はてなブログから技術ネタを移動しました
※ 初稿：2017/03/17

<style>
.clipping-target {
  width: 100%;
  height: 100%;
  mask: url(./mask.svg) no-repeat 50% 50%;
}
</style>
<div class="clipping-target">
Yo!
</div>

などと, maskしたり, clip-path css propertyでclipさせたりできるのだが、
IE 11では動かない！ 別の手段を使いましょう。
svgでsvgの要素をclipするのはIEでもできるみたいです。svgをhtml要素に作用させるのが不可みたい。