從css中設置svg animate的屬性

我有一個SVG動畫，我想用css設置animate標籤屬性from和to。從css中設置svg animate的屬性

喜歡：

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>

來源

2015-04-03 user007

這是不可能的。動畫屬性不是CSS屬性。 – 2015-04-03 07:24:51

你將不得不使用CSS動畫，而不是SVG的。事情是這樣的：

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

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

您還需要推遲每個元素的動畫，使它們按順序運行。我是用純CSS編寫的，因爲我不確定你對SASS/LESS的熟悉程度，但是使用預處理器和autoprefixer使這種事情變得更加容易。

來源

2015-04-16 03:50:03 mirichan

從css中設置svg animate的屬性

回答

相關問題