Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML5에서 SVG 원 안에 이미지를 표시하려면 어떻게 해야 합니까?

SVG 원 안에 이미지를 표시하려면 요소를 사용하고 클리핑 경로를 설정하세요. 요소는 클리핑 경로를 정의하는 데 사용됩니다. SVG의 이미지는 요소를 사용하여 설정됩니다.

HTML5에서 SVG 원 안에 이미지를 표시하려면 어떻게 해야 합니까?

예시

다음 코드를 실행하여 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>