可以使用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>
原文地址:https://www.jb51.cc/css/242316.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。