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

Question

动画结束时，笔触的颜色应变为黑色

        100% {
            stroke: black;

它在 Firefox 中运行正常，但在 Chrome

中运行不正常

代码笔：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;
        }

Answer 1

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

（另外请 post 一个关于 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-width="0" 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>

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

SVG stroke animation color render correct in Firefox but fail in Chrome

firefox

svg

google-chrome

svg-animate