SVG에서 마스크를 사용하여 잘못 정렬된 원형 컷아웃을 수정하는 방법은 무엇입니까?

SVG를 사용하여 이미지에서 원형 부분 잘라내기

현재 이미지에서 원형 부분을 잘라내기 위해 클립 경로를 사용하려는 시도가 제대로 정렬되지 않았습니다. 이 문제를 해결하기 위해 SVG에서 마스크를 사용하는 또 다른 접근 방식을 살펴보겠습니다.

<code class="svg"><svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"/>
      <circle r="50" cx="180" cy="180" fill="black"/>
    </mask>
  </defs>
  <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
    <image  xlink:href="https://picsum.photos/200/200?image=1069" x="0" y="0" width="200" height="200" />
  </pattern>
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

이 코드는 배경이 분홍색으로 설정된 SVG를 생성합니다. defs 요소 내부에는 "hole"이라는 마스크를 정의합니다. 이 마스크는 두 개의 원, 즉 이미지에서 유지하려는 원형 영역을 나타내는 큰 흰색 원과 컷아웃을 결정하는 작은 검정색 원으로 구성됩니다.

다음 요소는 "img"라는 패턴입니다. 이 패턴은 모양의 채우기로 사용하려는 이미지를 지정합니다. SVG 크기와 일치하도록 패턴의 크기를 설정하고 URL의 이미지를 사용합니다.

마지막으로 SVG의 전체 공간을 채우는 직사각형을 만듭니다. 직사각형의 채우기는 "img" 패턴을 참조하도록 설정되었으며 "구멍" 마스크를 적용하여 원형 섹션을 잘라냅니다.

위 내용은 SVG에서 마스크를 사용하여 잘못 정렬된 원형 컷아웃을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!