css - SVG マスクを画像に切り取る

Question

開発中の新しい Web サイトで問題が発生しています。SVG を使用するのは初めてです。基本的に、要素の下に画像を表示するには、常にページの中央にある円を画像から切り取る必要があります。クリッピングを試してみましたが、すべてが素晴らしかったです。マスク コードでエラーが見つからないようです。これは、私がセットアップしたクイックフィドルへのリンクです。ありがとう！

    <div class="bg-gradient">
    <img src="http://www.redhdwallpapers.com/wp-content/uploads/2014/05/red-background-6.jpg"/>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="mask">
      <circle cx="50%" cy="50%" r="45%" fill="none" />
    </mask>
  </defs>
</svg>