Javascript 向SVG圆添加线性渐变

我正在尝试添加一个梯度，我从网上得到我的SVG圈。这是我的梯度

background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);

我正在尝试将此渐变类型添加到我的圆圈中，而不是“fill=”yellow。我尝试在代码中插入渐变，但什么都没有。尝试搜索/玩弄渐变，但最终什么都没有。这是我的代码

代码笔

.circlesvg{
位置：绝对位置；
左：0；
排名：0；
}        
#第一圈{
动画：fadeAndScale 33s无限轻松；
-ms动画：fadeAndScale 33s无限轻松；
-webkit动画：fadeAndScale 33s无限轻松；
-moz动画：fadeAndScale 33s无限轻松；
-o-动画：fadeAndScale 33s无限轻松；
过渡时间函数：线性；
}
@关键帧fadeAndScale{
0%{
z指数：100；
变换：比例（0）；
转换：转换（200px，200px）；
}
100%{
z指数：0；
变换：尺度（200）；
}
}

---

您必须使用SVG的

元素，然后引用它作为填充：

 <defs>
    <linearGradient id="gradient">
      <stop offset="0%"  stop-color="#a18cd1"/>
      <stop offset="100%" stop-color="#fbc2eb"/>
    </linearGradient>
  </defs>
  <circle id="firstCircle" cx="0" cy="0" r="40" fill="url(#gradient)"></circle>

---

我做到了，100%部分卡在中间。哇！谢谢你：D。