home

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

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

บทนำ

SVG สามารถสร้างโลโก้ได้โดยใช้รูปทรงพื้นฐานร่วมกับ Gradient นี่คือตัวอย่างการสร้างโลโก้แบบมี Linear Gradient

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

<!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>

คำอธิบาย

  • <defs> - 定義 gradient ที่จะนำไปใช้ซ้ำ
  • <linearGradient> - กรเดียนต์เส้นตรงจากซ้ายไปขวา
  • <stop> - จุดสีใน gradient (offset 0%, 50%, 100%)
  • fill="url(#lgrad)" - ใช้ gradient ที่กำหนด