可以使用css更改svg填充.但我没有设法制作动画.
这是我的svg对象：
这是我的svg对象：
<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"> <rect id="fill" x="21" y="26" width="60" height="60"/> </svg>
而且,使用SASS：
@include keyframes(loading)
0%
fill: black
50%
fill: white
100%
fill: black
#fill
fill: white
@include animation(loading 3s infinite)
我究竟做错了什么？
解决方法
编辑
好吧看起来像这样的东西应该有效.
<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"> <style type="text/css" > <![CDATA[ @keyframes fill { 0% { fill: black; } 50% { fill: white; } 100% { fill: black; } } #fill { fill: black; animation-name: fill; animation-duration: 3s; animation-iteration-count: infinite; } ]]> </style> <rect id="fill" x="21" y="26" width="60" height="60"/> </svg>
