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

Question

有人知道为什么这段代码在FF中不起作用吗？在铬一切都很好，但不是在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

根据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>

Answer 2

考虑到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的未来可能有点不可预知，因此我建议您等待使用它，直到其未来更安全。