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

在面具元素，你有兩個圓圈。第一個是你想要切割的大圓圈。注意填充是白色的。這意味着形狀將被填充。

下一圈較小，將從第一圈切出。注意填充是黑色的。這意味着這個形狀不會被填充，而是保持透明。

現在這些圓圈只是定義要使用的蒙版，我們仍然需要繪製一個形狀來使用蒙版。這是mask和defs元素之外的最後一個圓。

最後，你應該看到一個藍色圓圈，中心有一個圓孔。