SVG에서 마스크를 사용하여 이미지에서 원형 부분을 자르는 방법은 무엇입니까?

이미지에서 원형 부분 자르기

SVG 경로를 사용하여 이미지를 자르려고 할 때 이미지가 제대로 맞지 않는 것처럼 나타날 수 있습니다. 원하는 원형 컷아웃을 얻으려면 다음 단계를 따르십시오.

다음 CSS 코드는 제공된 SVG 경로를 사용하여 클립 경로를 정의합니다. 그러나 이미지가 여전히 올바르게 맞지 않을 수 있습니다.

<code class="css">.topbar-chat-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  clip-path: url(#topbar-img-svg);
}</code>

이 문제를 해결하려면 대체 SVG 접근 방식을 사용할 수 있습니다.

<code class="svg"><svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"></circle>
      <circle r="50" cx="180" cy="180" fill="black"></circle>
    </mask>
    <pattern id="img" patternunits="userSpaceOnUse" width="200" height="200">
      <image xlink:href="image.jpg" x="0" y="0" width="200" height="200"></image>
    </pattern>
  </defs>

  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)"></rect>
</svg></code>

이 방법은 SVG 내에 마스크를 정의합니다. 깨끗한 원형 컷아웃을 보장합니다. 내에서 fill="url(#img)" 사용 태그는 원하는 이미지로 직사각형을 채우고 마스크를 적용하여 원하는 효과를 얻습니다.

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