Как исключить область внутри клипа в Svg

Question

Я хочу скрыть что-либо, что за пределами прямоугольника. (это я добился с отсечением успешно). но еще одним условием является то, что «также скрывает все, что входит в черный большой круг». Теперь, как я могу это достичь?

в нижнем примере «желтый круг» должен быть удален ».

см ниже изображений для деталей

• Оригинал: -

Желаемая: -

Ниже мой код SVG: -

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> 
<g> 
<rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/> 
<circle cx="180" cy="150" r="30" stroke="blue" /> 
</g> 

<g clip-path = "url(#clip1)"> 
    <circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" /> 
</g> 

<clipPath id = "clip1"> 
      <rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/> 
     </clipPath> 

</svg> 

Answer 1

Эрик Dahlström правильно, ваш клип может включать весь прямоугольник и вырез для круга. Таким образом, все, что вы связываете с #clip1, так как clip-path не будет видно внутри вашей области круга. Вот как это выглядит для примера:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> 
<g> 
<rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/> 
<circle cx="180" cy="150" r="30" stroke="blue" /> 
</g> 

<g clip-path = "url(#clip1)"> 
    <circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" /> 
</g> 

<clipPath id = "clip1"> 
    <path d="M 50,50 l200 0 l0 200 l-200 0z M150,150 a30,30 1 0,0 60,0z M210,150 a30,30 1 0,0 -60,0z"/> 
</clipPath>