SVG 中风动画颜色在 Firefox 中正确渲染，但在 Chrome 中失败

Posted 2023-03-28

【中文标题】SVG 中风动画颜色在 Firefox 中正确渲染，但在 Chrome 中失败

【英文标题】：SVG stroke animation color render correct in Firefox but fail in Chrome

【发布时间】：2021-09-17 07:30:12

【问题描述】：

当动画结束时，描边的颜色应该变成黑色

        100% 
            stroke: black;

它在 Firefox 中正确，但在 Chrome 中却没有

codepen：https://codepen.io/sendmead/pen/MWpzRjK

这是部分 svg 代码：

        @keyframes keyframes12 
          from 
            stroke: blue;
            stroke-dashoffset: 482;
            stroke-width: 128;
          
          61% 
            animation-timing-function: step-end;
            stroke: blue;
            stroke-dashoffset: 0;
            stroke-width: 128;
          
          100% 
            stroke: black;
            stroke-width: 1024;
          
        
        #char-animation-12 
          animation: keyframes12 0.6422526041666666s both;
          animation-delay: 8.892740885416666s;
          animation-timing-function: linear;
        

【参考方案1】：

您似乎是通过在关键帧中放置一个动画计时功能声明来触发 Chrome 错误（我认为这是不合法的，并且以前从未见过）。如果你去掉 step-end 并添加另一个关键帧以便它模仿 step-end，那么至少在这个最小的测试用例中一切正常。我还减少了计时中的小数位 - 太多的数字有时会在浏览器人员没有清理他们的输入的其他地方触发错误，所以去掉多余的数字并没有什么坏处。

（另外请在 SO 上发布一个完整的最小测试用例。链接腐烂）

<svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  <g stroke="white" stroke-dasharray="1,1" stroke- transform="scale(4, 4)">
    <line x1="0" y1="0" x2="256" y2="256"></line>
    <line x1="256" y1="0" x2="0" y2="256"></line>
    <line x1="128" y1="0" x2="128" y2="256"></line>
    <line x1="0" y1="128" x2="256" y2="128"></line>
  </g>
  <g transform="scale(1, -1) translate(0, -768)">
    <style type="text/css">      
        @keyframes keyframes12 
          0% 
            stroke: blue;
            stroke-dashoffset: 482;
            stroke-width: 128;
          
          61% 
            stroke: blue;
            stroke-dashoffset: 0;
            stroke-width: 128;
          
          
          99% 
            stroke: blue;
            stroke-dashoffset: 0;
            stroke-width: 128;
          
          
          100% 
            stroke: black;
            stroke-dashoffset: 0;
            stroke-width: 1024;
          
        
      
        #char-animation-12 
          animation: keyframes12 0.64s both;
          animation-delay: 8.8s;
          animation-timing-function: linear;
        
      
    </style>
    
      <path d="M 746 40 L 779 4 Q 800 -17 817 -43 Q 834 -70 849 -89 L 874 -120 Q 892 -138 904 -136 Q 916 -136 924 -124 Q 932 -113 930 -92 Q 926 -35 852 9 L 804 35 Q 779 47 771 49 L 756 54 Q 742 57 742 50 Q 740 47 746 40 Z" fill="lightgray"></path>

      <clipPath id="char-clip-12">
        <path d="M 746 40 L 779 4 Q 800 -17 817 -43 Q 834 -70 849 -89 L 874 -120 Q 892 -138 904 -136 Q 916 -136 924 -124 Q 932 -113 930 -92 Q 926 -35 852 9 L 804 35 Q 779 47 771 49 L 756 54 Q 742 57 742 50 Q 740 47 746 40 Z"></path>
      </clipPath>
      <path clip-path="url(#char-clip-12)" d="M 750 48 L 844 -23 L 881 -66 L 904 -112" fill="none" id="char-animation-12" stroke-dasharray="354 708" stroke-linecap="round"></path>
    
  </g>
</svg>

【讨论】：

只需删除关键帧下的“动画定时功能”即可完美运行。谢谢迈克尔！！不管怎样，我把codepen中的代码最小化了。