Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

สร้างรูปดาวด้วย HTML5 SVG


นี่คือเวอร์ชัน HTML5 ของตัวอย่าง SVG ที่วาดดาวโดยใช้แท็ก <polygon>

<html>
  <head>
    <style>
      #svgelem{
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
        transform: translateX(-40%);
      }
    </style>
    <title>SVG</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h2 align="center">HTML5 SVG Star</h2>
    <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
      <polygon points="100,10 40,180 190,60 10,60 160,180" fill="red"/>
    </svg>
  </body>
</html>

ผลลัพธ์

สร้างรูปดาวด้วย HTML5 SVG