1

我使用如下图所示的路径创建弧。这是我的代码

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

2 回答 2

1

您可以使用面罩切一个圆孔。

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

于 2019-06-20T22:07:35.457 回答
0

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

<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>
于 2019-06-20T19:51:49.093 回答