是否可以反轉SVG的裁剪？

Question

我在SVG元素上有一個矩形。然後我想在整個SVG區域上繪製另一個矩形，除了我已經繪製的。

我認爲口罩可能是一個解決方案，但他們似乎只是像剪輯一樣行事 - 做我想要的inverse。我試過這個：

<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>