アニメーションがFirefoxで動作しない

Question

このコードがFFで動作しない理由を知っている人はいますか？クロムではすべてがOKですが、FFではありません。ドットは白い色で塗りつぶされません。塗りつぶされないでください。 SMILは、クロスブラウザを動作しないことを考慮

<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はFirefoxで0.7になります。

また、白い白がスニペットにうまく表示されないため、背景の矩形も追加しました。

 <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

、私はあなたの代わりに

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>

を使用し、色 noneは動作しませんアニメーションCSSアニメーションを使用して提案することができます

---

SMILよりもCSS/Webアニメーションが好きなので、SMILの未来はいくらか予測できないかもしれないので、未来がより確実になるまでそれを待つことをお勧めします。