SVG：餅圖中的甜甜圈洞

我想在此SVG餅圖中切出甜甜圈洞。這可以在不編輯每個切片的路徑尺寸的情況下完成嗎？像一個重疊的面具也許？SVG：餅圖中的甜甜圈洞

<svg> 
    <path d="M 25 25 L 25 0 A 25 25 0 1 1 0.4428187317827863 29.68453286464311 Z" fill="#45c31b"></path> 
    <path d="M 25 25 L 0.4428187317827863 29.68453286464311 A 25 25 0 0 1 24.999999999999996 0 Z" fill="green"></path> 
</svg>

Fiddle

來源

2014-10-04 ditto

不知道我完全理解的效果，但爲什麼不乾脆把它上一個圓圈，如果你不想改變什麼嗎？......

<circle r="15" cx="25" cy="25" fill="white" />

jsfiddle

如果需要通過讓一個背景，那麼你可以把它放在一個組中，並使用口罩（或創建的初始路徑使用一些數學，使它已經沒有中間部分）。

<svg> 
    <defs> 
    <mask id="circlemask" > 
     <rect fill="white" width="100%" height="100%" /> 
     <circle r="15" cx="25" cy="25" fill="black"/> 
    </mask> 
    </defs> 
    <rect x="0" y="0" width="100" height="100" fill="blue"/> 
    <g mask="url(#circlemask)" > 
     <path d="M 25 25 L 25 0 A 25 25 0 1 1 0.4428187317827863 29.68453286464311 Z" fill="#45c31b"></path> 
     <path d="M 25 25 L 0.4428187317827863 29.68453286464311 A 25 25 0 0 1 24.999999999999996 0 Z" fill="green"></path> 
    </g> 
</svg>

jsfiddle

我不是一個大曬，我可能會更喜歡只是單獨創建圓環部分，所以都需要在所有沒有剪輯或口罩，這樣的風扇，但如果你是與已經創建的東西一起工作，這可能會奏效。

來源

2014-10-04 10:37:21 Ian

這並不理想，因爲填充需要透明。 – ditto 2014-10-04 10:39:57

我已經用一個額外的面具更新了答案。 – Ian 2014-10-04 11:25:02

SVG：餅圖中的甜甜圈洞

回答

相關問題