请问下老师圆形渐变

Question

<svg height="400" width="400">
      <defs>
        <!-- fx fy 内层圆  相当于渐变起始点
              cx xy 外层圆 
              r 渐变的半径
        -->
        <radialGradient id="test" cx="10%" cy="10%" fx="50%" fy="50%" r="20%">
          <stop offset="0%" stop-color="red" />
          <stop offset="100%" stop-color="yellow" />
        </radialGradient>
      </defs>
      <circle cx="200" cy="200" r="200" fill="url(#test)" />
    </svg>

老师能讲讲关于radialGradient吗。为什么是这个样子啊，我有点想不明白。麻烦老师了

Answer 1

扬_灵 2020-09-23 14:53:04

同学你好，你可以看一下这篇文档里面对radialGradient解释https://segmentfault.com/a/1190000009278935 如果不能解决你的问题，可以继续追问。

• 提问者 hy_wang #1

  老师我想请问是这个意思吗，cx和cy就是确定渐变圆的圆心，然后结合R确定了一个圆形--要求渐变到达这个圆心的边缘要完成所有渐变(达到offset为100%的颜色)。而fx和fy是确定渐变的起始点，从这个点开始向cxcy和r确定下来圆的边缘去渐变。是这样吗

• 扬_灵 回复 提问者 hy_wang #2

  我理解是这样的