SVG 径向渐变

径向渐变

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

左上方开始径向渐变

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad3" cx="25%" cy="25%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>

spreadMethod="reflect"

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad4" cx="25%" cy="25%" spreadMethod="reflect">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
</svg>

spreadMethod="repeat"

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad5" cx="25%" cy="25%" spreadMethod="repeat">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>

stop-opacity

<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad6" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" stop-opacity="0" />
      <stop offset="100%" stop-color="blue" stop-opacity="1" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad6)" />
</svg>