원형 SVG 경로에 맞게 이미지 크기 조정

SVG 경로를 사용하여 이미지에서 원형 부분을 자르려고 할 때 중요합니다. 올바른 정렬을 보장합니다. 이미지가 잘 맞지 않으면 SVG 마스크의 잘못된 크기 또는 위치 지정이 원인일 수 있습니다.

원하는 결과를 얻기 위한 대체 접근 방식은 다음과 같습니다.

향상된 방법은 다음과 같습니다. SVG 마스크:

이 방법은 SVG 마스크를 사용하여 이미지가 표시되는 원형 구멍을 만듭니다.

설명:

• #hole: 이는 흰색과 검정색 두 개의 원을 포함하는 SVG 마스크를 정의합니다. 흰색 원은 표시할 영역을 나타내고, 검은색 원은 마스크를 생성하여 원 외부 영역을 숨깁니다.
• #img: SVG 패턴은 이미지를 사용하여 패턴을 정의합니다. PatternUnits="userSpaceOnUse" 속성은 패턴이 적용된 모양에 맞게 늘어나도록 보장합니다.
• Rect 요소는 전체 SVG 컨테이너를 #img 패턴으로 채우고 #hole 마스크를 적용하여 원형 컷아웃을 표시합니다.

이 향상된 접근 방식을 사용하면 이제 이미지가 원형 SVG 마스크 내에 올바르게 맞춰집니다.