Вырезание маски SVG в изображение

Question

У меня проблема с новым веб-сайтом, который я разрабатываю. Это первый раз, когда я использую 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>

Answer 1

Маска с fill="none" вообще не является маской. Попробуйте вместо этого использовать fill="white".

Если вам нужна дыра, тогда вы захотите сделать маску обратной тем, что есть сейчас, поэтому используйте путь с fill-rule: evenodd Свойство и сначала нарисуйте прямоугольник, используя M, h и v по краю изображения, а затем обведите круг, используя дуги или кривые Безье, в направлении, противоположном направлению, по которому вы обводили край, так что правило заполнения делает отверстие в пути.

Вам лучше переключиться обратно на clipPath, так как он использует гораздо меньше памяти, чем маска, если все, что вы хотите сделать, это клип.