<svg viewBox="0 0 400 300">
  <!-- マスクされる要素 -->
  <rect mask="url(#mask)" fill="blue" x="0" y="0" width="400" height="300"></rect>
  <!-- マスクする要素 -->
  <mask id="mask">
    <!-- マスクする長方形をwhiteで配置(この形にマスクされる) -->
    <rect fill="white" stroke="black" x="0" y="0" width="300" height="200"></rect>
    <!-- マスクする長方形に重なるように円をblackで配置するとこの形に繰り抜ける -->
    <circle fill="black" cx="150" cy="100" r="50"></circle>
  </mask>
</svg>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.