Radial Gradient SVG

SVG ทางกระจายสีทางวงกลม - <radialGradient>

<radialGradient> แท็ก elements ใช้เพื่อกำหนดทางกระจายสีทางวงกลม (รังสีเชิงวงกลม)

<radialGradient> ตัวแปร elements ต้องมีการเข้าใน <defs> ในแท็ก.<defs> ตัวแปร elements คือย่อของ definitions ซึ่งมีการกำหนดขององค์ประกอบพิเศษ (เช่น filter)

ตัวอย่าง 1

กำหนดวงกลมตัวอย่าง 1 ที่มีทางกระจายสีทางวงกลมจากขาวไปสีน้ำเงิน:

นี่คือรหัส SVG:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

ทดลองด้วยตัวเอง

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

  • ตัวแปร id ของแท็ก <radialGradient> กำหนดชื่อเด่นของทางกระจาย
  • ตัวแปร cx, cy และ r กำหนดวงกลมนอกสุด ในขณะที่ fx และ fy กำหนดวงกลมในสุด
  • สีทางกระจายสามารถประกอบด้วยสีสองหรือมากกว่า โดยแต่ละสีจะถูกกำหนดด้วยสัญญาณ <stop>
  • ตัวแปร offset ใช้เพื่อกำหนดตำแหน่งเริ่มต้นและสิ้นสุดของสีทางกระจาย
  • ตัวแปร fill มีความหมายที่จะเชื่อมโยงวงกลมใน HTML กับทางกระจายสี

ตัวอย่าง 2

กำหนดวงกลมตัวอย่าง 1 ที่มีทางกระจายสีทางวงกลมจากขาวไปสีน้ำเงิน:

นี่คือรหัส SVG:

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

ทดลองด้วยตัวเอง