从css中设置svg animate的属性

Question

我有一个SVG动画，我想用css设置animate标签属性from和to。

喜欢：

animate{ 
    from: #f7f7f7; 
    to: #33d424; 
} 

这是可能的，我该怎么办呢？

这里是我的SVG代码：

<svg width='100px' height='100px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-squares"> 
     <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect> 
     <rect x="15" y="15" width="20" height="20" fill="#f7f7f7" class="sq"> 
      <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.0s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate> 
     </rect> 
     <rect x="40" y="15" width="20" height="20" fill="#f7f7f7" class="sq"> 
      <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.125s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate> 
     </rect> 
     <rect x="65" y="15" width="20" height="20" fill="#f7f7f7" class="sq"> 
      <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.25s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate> 
     </rect> 
     <rect x="15" y="40" width="20" height="20" fill="#f7f7f7" class="sq"> 
      <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.875s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate> 
     </rect> 
     <rect x="65" y="40" width="20" height="20" fill="#f7f7f7" class="sq"> 
      <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.375" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate> 
     </rect> 
     <rect x="15" y="65" width="20" height="20" fill="#f7f7f7" class="sq"> 
      <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.75s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate> 
     </rect> 
     <rect x="40" y="65" width="20" height="20" fill="#f7f7f7" class="sq"> 
      <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.625s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate> 
     </rect> 
     <rect x="65" y="65" width="20" height="20" fill="#f7f7f7" class="sq"> 
      <animate attributeName="fill" from="#f7f7f7" to="#33d424" repeatCount="indefinite" dur="1s" begin="0.5s" values="#33d424;#33d424;#f7f7f7;#f7f7f7" keyTimes="0;0.1;0.2;1"></animate> 
     </rect> 
    </svg> 

Answer 1

你将不得不使用CSS动画，而不是SVG的。事情是这样的：

http://jsfiddle.net/scarl3tt/g2frngcn/

@keyframes animate { 
    0% { 
    fill: #f7f7f7; 
    } 
    6.25% { 
    fill: #33d424; 
    } 
    12.5% { 
    fill: #f7f7f7; 
    } 
} 

您还需要推迟每个元素的动画，使它们按顺序运行。我是用纯CSS编写的，因为我不确定你对SASS/LESS的熟悉程度，但是使用预处理器和autoprefixer使这种事情变得更加容易。