SVG 패턴을 사용하여 원을 PNG 이미지로 채우는 방법은 무엇입니까?

SVG 패턴을 사용하여 PNG 이미지 채우기로 원 만들기

SVG 문서에서는 이미지 패턴으로 모양을 채울 수 있습니다. 그러나 아래와 같이 "fill" 속성을 사용하여 원을 이미지로 채우려고 하면 전체 원 영역이 단색으로 채워질 수 있습니다.

<circle ... fill="url('images/word-cloud.png')"/>

이미지 채우기를 달성하려면, SVG 패턴을 활용할 수 있습니다. 패턴 요소는 다른 요소의 채우기 속성에서 참조할 수 있는 재사용 가능한 그래픽을 정의합니다. 이미지를 콘텐츠로 사용하여 패턴을 정의하면 원하는 이미지 채우기로 원을 만들 수 있습니다.

예는 다음과 같습니다.

<svg width="700" height="660">
  <defs>
    <pattern>

이 코드에서 패턴은 다음과 같이 정의됩니다. <패턴> 주위의 요소 요소. 패턴의 id 속성은 "image"로 설정됩니다. PatternUnits 속성은 패턴이 사용자 공간 단위를 사용하도록 지정하여 이미지가 늘어나거나 왜곡되지 않도록 합니다.

원 요소 내에서 채우기 속성은 "이미지" 패턴을 참조하도록 설정됩니다. 결과적으로 원은 패턴 의 "xlink:href" 속성에 지정된 이미지로 채워집니다. 요소.

이 접근 방식을 사용하면 원 내 이미지 위치 지정 및 크기 조정을 포함하여 이미지 채우기를 유연하게 제어할 수 있습니다.

위 내용은 SVG 패턴을 사용하여 원을 PNG 이미지로 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!