검정색 채우기 없이 SVG 원에 배경 이미지를 추가하는 방법은 무엇입니까?

SVG 원 모양에 배경 이미지를 추가하는 방법(검은색으로 채우지 않고)

이미지 배경으로 SVG 원을 만드는 것은 SVG 패턴을 사용하여 가능합니다. 구현 방법은 다음과 같습니다.

문제:

다음 SVG 코드는 원에 배경 이미지를 추가하려고 시도하지만 대신 원을 검은색으로 채웁니다.

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

해결책:

다음으로 이미지 채우기를 사용하면 SVG 패턴이 사용됩니다.

<svg ...>
  <defs>
    <pattern>

설명:

• <패턴> 내의 요소 태그를 사용하여 좌표와 크기를 지정합니다.
• 패턴 내의 요소입니다.
• 원의 채우기 속성을 사용하여 패턴 ID를 참조하여 배경 이미지를 적용합니다.

예:

ID가 "top"인 서클에 배경 이미지 추가:

<svg ...>
  <defs>
    <pattern>

위 내용은 검정색 채우기 없이 SVG 원에 배경 이미지를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!