SVGでのマスキング？

Question

svgで切り取った円で円を描くにはどうすればよいでしょうか？これは、マスキング効果の一種として他の色のついた円の上にオーバーレイするために使用されます。

Answer 1

おそらくあなたの最善の策は、（親切にInkscapeの提供）のパスを使用することです：マスク要素内

<path fill="red" d="m 134.73897,236.38837 a 100,92.85714 0 1 1 44.86201,86.57396 l 54.68474,-77.743 z"> 

Answer 2

<svg version="1.1" viewBox="0 0 100 100"> 
     <defs> 
      <mask id="mask" x="0" y="0" width="100" height="100" maskUnits="userSpaceOnUse"> 
       <circle cx="50" cy="50" r="50" fill="white"/> 
       <circle cx="50" cy="50" r="25" fill="black"/> 
      </mask> 
     </defs> 
     <circle cx="50" cy="50" r="50" fill="blue" mask="url(#mask)"/> 
    </svg> 

を、次の2つの円を持っています。最初のものは、カットしたい大きなサークルです。塗りが白であることに注意してください。つまり、形が塗りつぶされます。

次の円は小さく、最初の円から切り取られます。塗りが黒であることに注意してください。つまり、この図形は塗りつぶされず、透明に残されます。

これらの円は、使用するマスクを定義するだけであり、マスクを使用するためにはまだ形状を描く必要があります。それはマスクの外にあり、要素を定義する最後の円です。

最後に、中央から円形の穴が切られた青い円が表示されます。