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

วิธีการวาดวงรีทับกันใน HTML5 SVG?


SVG ย่อมาจาก Scalable Vector Graphics และเป็นภาษาสำหรับการอธิบายกราฟิก 2 มิติและแอปพลิเคชันกราฟิกใน XML จากนั้น XML จะแสดงผลโดยโปรแกรมดู SVG เว็บเบราว์เซอร์ส่วนใหญ่สามารถแสดง SVG ได้เหมือนกับที่แสดง PNG, GIF และ JPG

ในการวาดวงรีใน HTML SVG ให้ใช้องค์ประกอบ SVG <วงรี> สำหรับการวาดวงรีทับกัน ให้กำหนดพิกัดให้ถูกต้อง

วิธีการวาดวงรีทับกันใน HTML5 SVG?

ตัวอย่าง

คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีวาดวงรีสองวงรีทับกันใน HTML5 SVG

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 20%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG Ellipse</title>
   </head>

   <body>
      <h2>HTML5 SVG Ellipse</h2>
      <svg id="svgelem" width="500" height="200" xmlns="https://www.w3.org/2000/svg">
         <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:green" />
         <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:yellow" />
      </svg>
   </body>
</html>

ผลลัพธ์

วิธีการวาดวงรีทับกันใน HTML5 SVG?