javascript - 向 SVG 圆添加线性渐变

Question

我正在尝试将从网上获得的渐变添加到我的 SVG 圈子中。这是我的渐变

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

我正在尝试将此渐变类型添加到我的圆圈中，而不是“fill="yellow”。我尝试在代码中插入渐变，但什么也没有。尝试搜索/尝试使用它，但最终一无所获。这里是我的代码

密码本 http://codepen.io/anon/pen/wdaMVR

    .circlesvg{
    			position: absolute;
    			left: 0;
    			top: 0;
    		}        
    			#firstCircle{
    			animation: fadeAndScale 33s ease-in infinite;
    			-ms-animation: fadeAndScale 33s ease-in infinite;
    			-webkit-animation: fadeAndScale 33s ease-in infinite;
    			-moz-animation: fadeAndScale 33s ease-in infinite;
    			-o-animation: fadeAndScale 33s ease-in infinite;
    			transition-timing-function: linear;
    			}
    			@keyframes fadeAndScale{
    			0%{
    			  z-index: 100;
    			  transform: scale(0);
    			  transform: translate(200px, 200px);
    			}
    			100%{
    			  z-index: 0;
    			  transform: scale(200);
    
    }
    		  }

<svg width="100%" height="100%" class="circlesvg">
  <circle id="firstCircle" cx="0" cy="0" r="40" fill="yellow"></circle>
</svg>

Answer 1

您必须使用 SVG 的 <linearGradient>元素，然后引用它作为填充:

 <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>

http://codepen.io/anon/pen/VbLaYy