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

내가 큰 느끼고, 아마, 그래서 클립이나 마스크에는 전혀 필요하지 않다, 혼자 도넛 섹션을 만들 단지 선호의 그런 팬이 아니에요하지만 당신은 경우 이미 생성 된 무언가를 사용하면 작동 할 수 있습니다.