Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML5에서 SVG 원 안에 이미지를 표시하는 방법

SVG 원(circle) 안에 이미지를 표시하려면 <circle> 요소와 클리핑 경로(clipping path)를 활용해야 합니다. 클리핑 경로는 <clipPath> 요소로 정의하며, SVG에서 이미지는 <image> 요소를 사용해 설정합니다.

클리핑 경로를 적용하면 이미지가 정의한 원 모양에 맞춰 잘려 나타나므로, 사각형 이미지도 자연스럽게 원 형태로 보여줄 수 있습니다.

예제

아래 코드를 실행하면 HTML5에서 SVG 원 안에 이미지를 표시하는 방법을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Image</title>
   </head>
   <body>
      <svg width="500" height="350">
         <defs>
            <clipPath id="myCircle">
               <circle cx="250" cy="145" r="125" fill="#FFFFFF" />
            </clipPath>
         </defs>
         <image width="500" height="350" xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" clip-path="url(#myCircle)" />
      </svg>
   </body>
</html>

코드 설명

<defs> 영역 안에 <clipPath>를 정의하고, 그 안에 중심 좌표(cx=250, cy=145)와 반지름(r=125)을 가진 원을 지정합니다. 이후 <image> 요소의 clip-path="url(#myCircle)" 속성으로 해당 클리핑 경로를 참조하면, 이미지가 원 모양으로 잘려 화면에 표시됩니다.