SVG linearGradient标签控制渐变

如下所示

<svg viewBox="0 0 10 10" >
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

　　

通过linearGradient标签控制渐变方向，同css中的渐变，

gradientTransform属性控制渐变角度，stop标签控制起始终点位置与颜色，通过fill叠加到对应图形上