SVG 线性渐变 和 径向渐变

一、线性渐变

• gradientUnits 取值范围：

  • objectBoundingBox(当前坐标系)

  • userSpaceOnUse(世界坐标系)

  • 默认就是前者 当前坐标系，看下面案例。

• 案例代码

  <svg xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="lg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stop-color="#149FC"></stop>
          <stop offset="0.5" stop-color="#A469BE"></stop>
          <stop offset="1" stop-color="#FF8C00"></stop>
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="200" height="200" fill="url(#lg)"></rect>
  </svg>
  

  

• 测试一下 userSpaceOnUse(世界坐标系)

  <svg xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="lg" x1="100" y1="100" x2="150" y2="150" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#149FC"></stop>
        <stop offset="0.5" stop-color="#A469BE"></stop>
        <stop offset="1" stop-color="#FF8C00"></stop>
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="200" height="200" fill="url(#lg)"></rect>
  </svg>
  

  

二、径向渐变

• 案例代码

  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
      <defs>
        <radialGradient id="rg" cx="0.5" cy="0.5" r="0.5" fx="">
          <stop offset="0" stop-color="#149FC"></stop>
          <stop offset="0.5" stop-color="#A469BE"></stop>
          <stop offset="1" stop-color="#FF8C00"></stop>
        </radialGradient>
      </defs>
      <rect x="0" y="0" width="200" height="200" fill="url(#rg)"></rect>
  </svg>
  

  

• fx、fy 使用：

  取值范围 0 - 1，默认 0.5，也就是上面案例的效果。

  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
      <defs>
        <radialGradient id="rg" cx="0.5" cy="0.5" r="0.5" fx="0.1" fy="0.5">
          <stop offset="0" stop-color="#149FC"></stop>
          <stop offset="0.5" stop-color="#A469BE"></stop>
          <stop offset="1" stop-color="#FF8C00"></stop>
        </radialGradient>
      </defs>
      <rect x="0" y="0" width="200" height="200" fill="url(#rg)"></rect>
  </svg>