กราดฉากตรงขอบของ SVG

SVG กระจาย

กระจายเป็นการเปลี่ยนสีจากสีหนึ่งไปยังสีอื่นโดยสมบูรณ์ นอกจากนี้ ยังสามารถใช้กระจายสีหลายระดับในองค์ประกอบเดียว

SVG มีสองประเภทกระจายหลัก

  • กระจายแบบตรงข้าม
  • กระจายแบบกลม

SVG กระจายแบบตรงข้าม - <linearGradient>

<linearGradient> element ใช้เพื่อกำหนดกระจายแบบตรงข้าม

<linearGradient> element ต้องมีองค์ประกอบภายใน <defs> ในตาราง<defs> element คือสั้นแก้วของคำว่า definitions และมีการกำหนดสำหรับองค์ประกอบพิเศษ (เช่น filter)

กระจายแบบตรงข้ามสามารถกำหนดเป็นกระจายแบบตรงข้าม ตั้งแต่ด้านล่างสู่ด้านบน หรือแบบมุม

  • สร้างกระจายแบบตรงข้ามเมื่อ y1 และ y2 เท่ากันและ x1 และ x2 ไม่เท่ากัน
  • สร้างกระจายแบบตั้งแต่ด้านล่างสู่ด้านบนเมื่อ x1 และ x2 เท่ากันและ y1 และ y2 ไม่เท่ากัน
  • สร้างกระจายแบบมุมเมื่อ x1 และ x2 ต่างกันและ y1 และ y2 ไม่เท่ากัน

ตัวอย่าง 1

กำหนดเป็นวงกลมที่มีสีสลับจากเหลืองไปยังแดงทางแบบกระจายแบบตรงข้าม

สำหรับ SVG รหัสนี้：

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

ลองทดลองเอง

การอธิบายรหัส

  • คุณสมบัติ id ของแท็กซ์ธ์ <linearGradient> กำหนดชื่อที่เป็นเดียวกัน
  • คุณสมบัติ x1, x2, y1, y2 ของแท็กซ์ธ์ <linearGradient> กำหนดตำแหน่งเริ่มต้นและสิ้นสุดของการเปลี่ยนสี
  • สีที่เปลี่ยนสามารถประกอบด้วยสีสองหรือมากกว่า
  • คุณสมบัติ offset ใช้กำหนดตำแหน่งเริ่มต้นและสิ้นสุดของสีที่เปลี่ยน
  • คุณสมบัติ fill ใช้เชื่อมโยงตัววงกลมกับการเปลี่ยนสี

ตัวอย่าง 2

กำหนดรูปวงกลมที่มีสีทางทิศตะวันออกทางทิศตะวันตกที่เปลี่ยนจากเหลืองสีส้มไปยังแดง

สำหรับ SVG รหัสนี้：

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

ลองทดลองเอง

ตัวอย่าง 3

กำหนดรูปวงกลม และใส่ข้อความภายในวงกลม มีสีทางทิศตะวันออกทางทิศตะวันตกที่เปลี่ยนจากเหลืองสีส้มไปยังแดงทางทิศตะวันออกทางทิศตะวันตก

SVG

สำหรับ SVG รหัสนี้：

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

ลองทดลองเอง

การอธิบายรหัส

  • อิเลเมนต์ <text> ใช้เพื่อเพิ่มข้อความ