SVGのクリッピングを反転することはできますか？

Question

SVG要素に長方形があります。 SVGエリアの上に別の矩形を描きたいのですが、を除き、私はすでに描画しています。

私はマスクが解決策かもしれないと思っていましたが、クリッピングのように動作しているように思います。逆をしたいのです。私はこれを試してみた：

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