SVG дуговой зажим внутренний радиус - PullRequest
Новая
       58

SVG дуговой зажим внутренний радиус

1 голос
/ 20 июня 2019

Я создаю дугу, используя путь, как на изображении ниже.Вот мой код 

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

enter image description here

Как я могу обрезать внутренний радиус следующим образом enter image description here

Он должен быть прозрачным, потому что я использую фоновое изображение.Я пытаюсь с пути клипа, но это клип дуги снаружи.

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

Ответы [ 2 ]

1 голос
/ 21 июня 2019

Вы можете использовать маску , чтобы вырезать круглое отверстие. 

<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>
0 голосов
/ 20 июня 2019

Я создал путь обрезки в этом примере, создав внутренний круг, а затем добавив в конец круглой части пути прямоугольник, который находится за пределами фигуры, которую я пытаюсь обрезать, и обводит круг назад. Если вы извлечете путь клипа из приведенного ниже примера и отобразите его, вы поймете, что я имею в виду. 

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