Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

ฉันจะแสดงรูปภาพภายในวงกลม SVG ใน HTML5 ได้อย่างไร


ในการแสดงรูปภาพภายในวงกลม SVG ให้ใช้องค์ประกอบ และกำหนดเส้นทางการคลิป องค์ประกอบ ใช้เพื่อกำหนดเส้นทางการตัด รูปภาพใน SVG ถูกตั้งค่าโดยใช้องค์ประกอบ

ฉันจะแสดงรูปภาพภายในวงกลม SVG ใน HTML5 ได้อย่างไร

ตัวอย่าง

คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีแสดงรูปภาพภายในแวดวง SVG ใน 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>