使用 css 动画 svg 路径填充

Posted 2023-03-06

【中文标题】使用 css 动画 svg 路径填充

【英文标题】：Animate svg path fill using css

【发布时间】：2013-01-23 06:22:40

【问题描述】：

可以使用 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"   viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"> 
<rect id="fill" x="21" y="26"  />
</svg>

并且，使用 SASS：

@include keyframes(loading)
  0%
    fill: black
  50%
    fill: white
  100%
    fill: black
#fill
  fill: white
  @include animation(loading 3s infinite)

我做错了什么？

【参考方案1】：

编辑

好的，看起来像这样的东西应该可以工作。

    <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"   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"  />
</svg>

示例如下：http://jsbin.com/ayiheb/2/edit

【讨论】：

谢谢 =) 但我需要为特定形状设置动画#fill。

@evergreenv 好吧。是否有理由需要在 CSS 中完成而不是在 SVG 中使用动画标签？

@evergreenv 顺便说一句，用应该有效的东西更新了答案。告诉我！

我希望能够使用类触发动画，并且不想使用动画创建额外的 svg。或者可以使用 display:none; 关闭动画？而且看起来 Chrome 不支持这种带有外部 css 的动画。