home

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

วิธีการวาดโลโก้ SVG ใน HTML5?

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

คุณสามารถวาดรูปร่าง เช่น วงกลม สี่เหลี่ยมผืนผ้า เส้น ฯลฯ โดยใช้ SVG ใน HTML5 ได้อย่างง่ายดาย มาดูตัวอย่างการวาดโลโก้ SVG สำหรับสิ่งนั้น เราจะสร้างการไล่ระดับสีเชิงเส้น:

วิธีการวาดโลโก้ SVG ใน HTML5?

ตัวอย่าง

คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อวาดโลโก้ SVG -

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG logo</title>
   </head>
   <body>
      <svg height="170" width="400">
         <defs>
            <linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%">
               <stop offset="0%"
               style="stop-color:rgb(184,78,43);stop-opacity:1" />
               <stop offset="50%"
               style="stop-color:rgb(241,241,241);stop-opacity:1" />
               <stop offset="100%"
               style="stop-color:rgb(255,141,52);stop-opacity:1" />
            </linearGradient>
         </defs>
         <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" />
         <text fill="#rgb(141,218,255)" font-size="40" font-family="Verdana"
            x="50" y="86">logo</text>
      </svg>
   </body>
</html>

ผลลัพธ์

วิธีการวาดโลโก้ SVG ใน HTML5?