将线性渐变添加到SVG圆

Question

I am trying to add a gradient I got from online to my SVG circle. This is my gradient

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

I am trying to add this gradient type to my circle instead of the "fill="yellow". I tried inserting the gradient in the code but nothing. Tried searching/playing around with it but, ended up with nothing. Here is my code

Codepen 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

You would have to use SVG's <linearGradient> element and then reference it as the fill:

 <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