SVG 경로를 사용하여 원형 이미지 섹션을 자르는 방법: 종합 안내서

SVG로 원형 이미지 자르기

SVG 경로를 사용하여 이미지의 원형 부분을 자르려고 할 때 정렬이 잘못되었습니다. 원하는 결과를 얻으려면 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>
  <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>
  </defs>
  <!-- create a rect, fill it with the image and apply the above mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg>

이 SVG 방법에는 원형 구멍과 패턴이 있는 마스크를 만드는 작업이 포함됩니다. 이미지와 함께. 그런 다음 직사각형이 이미지 패턴으로 채워지고 구멍으로 마스크됩니다. 이로 인해 SVG 컨테이너 내에서 이미지가 원형으로 잘립니다.

위 내용은 SVG 경로를 사용하여 원형 이미지 섹션을 자르는 방법: 종합 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!