使用 css 动画 svg 路径填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14756422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 21:36:12 来源:igfitidea点击:
Animate svg path fill using css
提问by vadirn
It is possible to change svg fill using css. But I didn't manage to create an animation. Here is my svg object:
可以使用 css 更改 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>
And, using SASS:
并且，使用 SASS：
@include keyframes(loading)
0%
fill: black
50%
fill: white
100%
fill: black
#fill
fill: white
@include animation(loading 3s infinite)
What am I doing wrong?
我究竟做错了什么？
回答by gotohales
EDIT
编辑
Okay it looks like something like this should work.
好吧，看起来像这样应该可以工作。
<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>
Here is the example: http://jsbin.com/ayiheb/2/edit
