SVG弧形夹内半径

Question

我使用像波纹管这样的路径创建弧。这是我的代码

      <Path d="M50 50 10 49.99999999999999 A40 40 0 0 1 50 10Z" fill="#81c784" />
      <Path d="M50 50 49.99999999999999 90 A40 40 0 0 1 10 49.99999999999999Z" fill="#00838f" />
      <Path d="M50 50 50 10 A40 40 0 0 1 49.99999999999999 90Z" fill="#26c6da" />

我该如何裁剪内半径

它必须是透明的，因为我使用背景图像。我尝试使用剪切路径，但它会在外部剪切弧。

 <ClipPath id="clip" >            
      <Circle
        cx="50"
        cy="50"
        r="20"
      />
    </ClipPath>

Answer 1

您可以使用mask切出一个圆孔。

<mask id="msk1">
    <rect width="100%" height="100%" fill="white" />
    <circle cx="250" cy="250" r="150" fill="black" />
  </mask>

蒙版中的不透明圆fill = "black"会切出一个孔。
清晰的矩形fill = "white"显示了拱的其余部分。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="100%" height="100%" viewBox="0 0 600 600" > 
<defs>		 
  <mask id="msk1">
    <rect width="100%" height="100%" fill="white" />
    <circle cx="250" cy="250" r="150" fill="black" />
  </mask>

</defs>
<g mask="url(#msk1)">
    <path fill="#81c784" d="M250,250v250C111.9,500,0,388.1,0,250H250z"/>
    <path fill="#00838f" d="M0,250C0,111.9,111.9,0,250,0v250H0z"/>
    <path fill="#26c6da" d="M250,500c138.1,0,250-111.9,250-250S388.1,0,250,0V500z"/>
</g>
	  
 </svg>

Answer 2

在此示例中，我通过创建内部圆并随后在路径的圆形部分的末端附加了一个矩形（该矩形在我尝试剪切的形状之外并向后绕该圆进行），创建了剪切路径。如果从下面的示例中提取剪辑路径并显示它，您将明白我的意思。

<clipPath id="innerClip">
    <path d="M250,375c-69,0-125-56-125-125s56-125,125-125s125,56,125,125S319,375,250,375v185h300l-4-620H-54v620h304V375z"/>
</clipPath>
<g clip-path="url(#innerClip)">
    <path fill="#81c784" d="M250,250v250C111.9,500,0,388.1,0,250H250z"/>
    <path fill="#00838f" d="M0,250C0,111.9,111.9,0,250,0v250H0z"/>
    <path fill="#26c6da" d="M250,500c138.1,0,250-111.9,250-250S388.1,0,250,0V500z"/>
</g>