วิธาแสดงภาพภายในวงกลม SVG ใน HTML5

บทนำ

การแสดงภาพภายในวงกลม SVG ใช้เทคนิค Clipping Path โดยใช้แท็ก <clipPath> ร่วมกับ <circle> แล้วนำไปใช้กับแท็ก <image> ผ่านแอตทริบิวต์ clip-path

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG Image in Circle</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://example.com/image.jpg" 
           clip-path="url(#myCircle)" />
    </svg>
  </body>
</html>

คำอธิบาย

1. <defs> - โซน定義ที่ไม่แสดงผลโดยตรง
2. <clipPath id="myCircle"> - กำหนดพื้นที่ตัด (วงกลม)
3. <image clip-path="url(#myCircle)"> - ใช้ clipping path ตัดภาพ

การใช้งานจริง

• โปรไฟล์ผู้ใช้แบบวงกลม
• Thumbnail รูปภาพ
• Avatar ในระบบแชท

หมายเหตุ

ใน SVG2 ใช้ href แทน xlink:href แต่ยังรองรับทั้งคู่เพื่อความเข้ากันได้