一、线性渐变
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>
