Computer >> Máy Tính >  >> Lập trình >> HTML

Làm cách nào để hiển thị hình ảnh bên trong vòng tròn SVG trong HTML5?

Để hiển thị hình ảnh bên trong vòng tròn SVG, hãy sử dụng phần tử và đặt đường cắt. Phần tử được sử dụng để xác định đường dẫn cắt. Hình ảnh trong SVG được đặt bằng phần tử .

Làm cách nào để hiển thị hình ảnh bên trong vòng tròn SVG trong HTML5?

Ví dụ

Bạn có thể thử chạy mã sau để tìm hiểu cách hiển thị hình ảnh bên trong vòng tròn SVG trong HTML5 

<!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>