Question

我正在尝试添加从在线到我的SVG圈子的渐变。这是我的渐变

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

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

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

您必须使用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

将线性渐变添加到SVG圆

1 个答案: