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

วิธีการวาดเส้นใน 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: 10%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG Line</title>
   </head>
   <body>
      <h2>HTML5 SVG Line</h2>
      <svg id = "svgelem" width = "300" height = "200" xmlns = "https://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "100" y2 = "100" style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

ผลลัพธ์

วิธีการวาดเส้นใน HTML5 SVG?