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的未來可能有點不可預知，因此我建議您等待使用它，直到其未來更安全。