svg 填充动画在 firefox 中不起作用

Question

有人知道为什么这段代码在 FF 中不起作用吗？在 chrome 中一切正常，但在 FF 中却不行。点不填充白色，只是保持未填充状态。

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.57 26.18">
      <defs>
        <style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}</style>
      </defs>
      <title>kropeczki</title>
      <g id="Warstwa_2" data-name="Warstwa 2">
        <g id="Layer_1" data-name="Layer 1">

          <circle class="cls-1" cx="13.09" cy="13.09" r="12.09">
        <animate
        attributeName="fill" from="none" to="#fff" begin="0.7" dur=".1s" fill="freeze" repeatCount="1"/>  
          </circle>
          <circle class="cls-1" cx="64.79" cy="13.09" r="12.09">
            <animate
        attributeName="fill" from="none" to="#fff" begin="1" dur=".1s" fill="freeze" repeatCount="1"/> 
          </circle>
          <circle class="cls-1" cx="116.49" cy="13.09" r="12.09">
            <animate
        attributeName="fill" from="none" to="#fff" begin="1.3" dur=".1s" fill="freeze" repeatCount="1"/>
          </circle>
        </g>
      </g>

    </svg>

Answer 1

考虑到 SMIL 不能跨浏览器工作，我建议您使用 CSS 动画代替

动画颜色 none 不起作用，请使用 transparent

body {
  background: gray;
}
.cls-1 {
  fill: transparent;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 2px;
  -webkit-animation-name: setcolor;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-name: setcolor;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.cls-1:nth-child(2) {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}
.cls-1:nth-child(3) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@keyframes setcolor {
  100% {
    fill: white;
  }
}
@-webkit-keyframes setcolor {
  100% {
    fill: white;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.57 26.18">
      <title>kropeczki</title>
      <g id="Warstwa_2" data-name="Warstwa 2">
        <g id="Layer_1" data-name="Layer 1">
          <circle class="cls-1" cx="13.09" cy="13.09" r="12.09">
          </circle>
          <circle class="cls-1" cx="64.79" cy="13.09" r="12.09">
          </circle>
          <circle class="cls-1" cx="116.49" cy="13.09" r="12.09">
          </circle>
        </g>
      </g>
</svg>

注意，由于 Chrome 比 SMIL 更喜欢 CSS/Web 动画，SMIL 的未来可能有点不可预测，所以我建议等待使用它，直到它的未来更安全。

Answer 2

根据 SVG 和 SMIL 规范，持续时间不允许以句号开头。根据规范要求添加前导 0，以便 .7 变为 0.7 修复了 Firefox 中的问题。

我还添加了一个背景矩形，因为白底白字在代码段中显示不太好。

     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.57 26.18">
          <defs>
            <style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}</style>
          </defs>
          <title>kropeczki</title>
          <g id="Warstwa_2" data-name="Warstwa 2">
            <rect width="100%" height="100%" fill="black"/>
            <g id="Layer_1" data-name="Layer 1">
              
              <circle class="cls-1" cx="13.09" cy="13.09" r="12.09">
            <animate
            attributeName="fill" from="none" to="#fff" begin="0.7" dur="0.1s" fill="freeze" repeatCount="1"/>  
              </circle>
              <circle class="cls-1" cx="64.79" cy="13.09" r="12.09">
                <animate
            attributeName="fill" from="none" to="#fff" begin="1" dur="0.1s" fill="freeze" repeatCount="1"/> 
              </circle>
              <circle class="cls-1" cx="116.49" cy="13.09" r="12.09">
                <animate
            attributeName="fill" from="none" to="#fff" begin="1.3" dur="0.1s" fill="freeze" repeatCount="1"/>
              </circle>
            </g>
          </g>
          
        </svg>

svg 填充动画在 firefox 中不起作用

svg fill animation does not work in firefox

css

svg

fill

svg-animate