> 웹 프론트엔드 > CSS 튜토리얼 > SVG 패턴을 사용하여 원을 PNG 이미지로 채우는 방법은 무엇입니까?

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

Susan Sarandon
풀어 주다: 2024-12-14 00:35:14
원래의
746명이 탐색했습니다.

How to Fill a Circle with a PNG Image Using SVG Patterns?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿