Madafu ya SVG

Kiume cha kiume - <radialGradient>

<radialGradient> Kielekana la kiume lina kumefanya kielekana la kiume (kama kuelekana la kiume).

<radialGradient> Kielekana la kiume lazima likaa nje ya <defs> ina kielekana la kiume.<defs> Kielekana la definitions kinachosababu kwa kufupishwa, kinahusisha kielekana za kiume (kama filtri).

Mfano 1

Inaanza kielekana la kiume, ina mawimbi ya kiume na kumekia kwa rangi ya kiume na kumekia kwa rangi ya kiume:

Hii ni kipengeza kwa HTML:

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

Jifunze kwa urahisi

Kuelewa kwa kifupi cha kielekana la kiume:

• Tupu la id la <radialGradient> lina kumefanya jina pekee la kiume
• Tupu la cx, cy na r lina kumefanya kielekana la kiume kikimbili, fx na fy lina kumefanya kielekana la kiume kikidogo
• Kipimo cha rangi cha kiume kinaweza kugawanywa na rangi mbili au zaidi. Kila rangi kinawekwa kwa kutumia <stop> label
• Tupu la offset lina kumefanya kielekana la rangi ya kiume kuanza na kumekia kwa rangi ya kiume
• Tupu la fill lina kumuonyesha kielekana la kiume katika elementi za kiume

Mfano 2

Inaanza kielekana la ingia, ina mawimbi ya kiume na kumekia kwa rangi ya kiume na kumekia kwa rangi ya kiume:

Hii ni kipengeza kwa HTML:

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

Jifunze kwa urahisi