Можно ли инвертировать обрезку SVG?

Question

У меня есть прямоугольник на элементе SVG. Затем я хочу нарисовать еще один прямоугольник по всей области SVG , за исключением rect, который я уже нарисовал.

Я думал, что маски могут быть решением, но они, похоже, действуют так же, как отсечение - делают обратный того, что я хочу. Я пробовал:

<svg id="mySVG" width="600" height="250"> 
    <defs> 
     <mask id="myMask" x="0" y="0" width="600" height="250" > 
      <circle cx="25" cy="25" r="25" fill="white"/> 
     </mask> 
    </defs> 

    <rect x="0" y="0" width="600" height="250" fill="red" mask="url(#myMask)"></rect> 
</svg> 

Так что я за этим обратный этому изображению.

Answer 1

Нарисуйте прямоугольник для всего, затем используйте черный круг, чтобы вырезать целое.

Или альтернативно и более эффективно, нарисуйте все это с помощью пути, в котором вы можете нарисовать прямую по часовой стрелке и круг против часовой стрелки в качестве выреза.

Вот самый простой первый вариант, учитывая, что вы уже больше всего там с этим.

<svg id="mySVG" width="600" height="250"> 
 
    <defs> 
 
     <mask id="myMask" x="0" y="0" width="600" height="250" > 
 
      <rect width="600" height="250" fill="white"/> 
 
      <circle cx="25" cy="25" r="25" fill="black"/> 
 
     </mask> 
 
    </defs> 
 

 
    <rect x="0" y="0" width="600" height="250" fill="red" mask="url(#myMask)"></rect> 
 
</svg>