SVG의 클리핑을 반전시킬 수 있습니까?

Question

SVG 요소에 사각형이 있습니다. 그런 다음 SVG 영역 전체에 다른 사각형을 그려야합니다 을 제외한 나머지 부분은 이미 그려져 있습니다.

마스크가 해결책이 될 수 있다고 생각했지만 클리핑과 같이 작동하는 것 같습니다. 반대로을 사용하고 싶습니다. 나는 이것을 시도했다 :

<svg id="mySVG" width="600" height="250"> 
    <defs> 
     <mask id="myMask" x="0" y="0" width="600" height="250" > 
      <circle cx="25" cy="25" r="25" fill="white"/> 
     </mask> 
    </defs> 

    <rect x="0" y="0" width="600" height="250" fill="red" mask="url(#myMask)"></rect> 
</svg> 

그래서 나는이 이미지의 역이다.

Answer 1

전체를 잘라내어 전체를 잘라내려면 검은 색 원을 사용하십시오.

또는 그보다 더 능동적으로, 시계 방향으로 원을 그리거나 원형으로 시계 방향으로 그릴 수있는 경로로 모든 것을 그립니다.

가장 쉬운 방법은 이미 나와 함께한다는 것입니다.

<svg id="mySVG" width="600" height="250"> 
 
    <defs> 
 
     <mask id="myMask" x="0" y="0" width="600" height="250" > 
 
      <rect width="600" height="250" fill="white"/> 
 
      <circle cx="25" cy="25" r="25" fill="black"/> 
 
     </mask> 
 
    </defs> 
 

 
    <rect x="0" y="0" width="600" height="250" fill="red" mask="url(#myMask)"></rect> 
 
</svg>