원형 SVG 마스크에 맞게 이미지 크기를 조정하는 방법은 무엇입니까?

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

SVG 경로를 사용하여 이미지에서 원형 부분을 자르려는 경우, 올바른 정렬을 보장합니다. 이미지가 잘 맞지 않으면 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>
    <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 mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

설명:

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

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

위 내용은 원형 SVG 마스크에 맞게 이미지 크기를 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!