css - 可能的错误 : stroke-linecap ="round" get distorted in Firefox while animated

Question

当我意识到它可能是 Firefox 中的一个错误时，我正在回答 Stack Overflow 上的一个问题，同时使用 stroke-linecap="round" 和 vector-effect= “非缩放笔画”

svg{border:1px solid}


path{
  animation: draw 1s ease-in;
  animation-fill-mode: forwards;
}

@keyframes draw {
  from{transform:scale(0.1,1)}
  to {transform:scale(1,1)}
}

<svg viewBox="0 0 700 100"> 
<path d="M0,50H500" stroke="blue" stroke-width = "25" stroke-linecap="round" transform="scale(0.1,1)" vector-effect="non-scaling-stroke"/>
</svg>

这是 Chrome 中的最终结果:

这是在 Firefox 中:

请注意，如果路径不是动画，则不会发生这种情况。

如何避免这个问题？

更新

此外:调整我想出的代码:如果我将 transform="scale(.1,1)" 更改为 transform="scale(1,1)" “roundcapness”的方面看起来不错动画的结尾，但是圆度开始平坦并在动画过程中凸起，您可能会在下一个示例中看到:

svg{border:1px solid}


path{
  animation: draw 10s ease-in;
  animation-fill-mode: forwards;
}

@keyframes draw {
  from{transform:scale(0.1,1)}
  to {transform:scale(1,1)}
}

<svg viewBox="0 0 700 100"> 
<path d="M0,50H500" stroke="blue" stroke-width = "25" stroke-linecap="round" transform="scale(1,1)" vector-effect="non-scaling-stroke"/>
</svg>

Answer 1

去掉路径的transform属性后问题解决。现在它可以在 Firefox 上正常工作。

svg{border:1px solid}

path{
  animation: draw 1s ease-in;
  animation-fill-mode: forwards;
}

@keyframes draw {
  from{transform:scale(0.1,1)}
  to {transform:scale(1,1)}
}

<svg viewBox="0 0 700 100"> 
<path d="M0,50H500" stroke="blue" stroke-width = "25" stroke-linecap="round" vector-effect="non-scaling-stroke"/>
</svg>