可以使用css更改svg填充.但我没有设法制作动画.
这是我的svg对象： @H_404_3@<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>
这是我的svg对象： @H_404_3@<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：
@H_404_3@@include keyframes(loading) 0% fill: black 50% fill: white 100% fill: black #fill fill: white @include animation(loading 3s infinite)我究竟做错了什么？
解决方法
编辑
好吧看起来像这样的东西应该有效.
@H_404_3@<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>