SVG：饼图中的甜甜圈洞

Question

我想在此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

Answer 1

不知道我完全理解的效果，但为什么不干脆把它上一个圆圈，如果你不想改变什么吗？......

<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

我不是一个大晒，我可能会更喜欢只是单独创建圆环部分，所以都需要在所有没有剪辑或口罩，这样的风扇，但如果你是与已经创建的东西一起工作，这可能会奏效。