可能的错误：stroke-linecap="round" 在动画时在 Firefox 中变形答案

【问题标题】：Possible bug: stroke-linecap="round" get distorted in Firefox while animated可能的错误：stroke-linecap="round" 在动画时在 Firefox 中变形
【发布时间】：2019-04-13 21:18:36
【问题描述】：

当我意识到这可能是 Firefox 中的一个错误时，我正在回答一个关于 Stack Overflow 的问题，同时使用 stroke-linecap="round" 和 vector-effect="non-scaling-stroke" 对一行进行动画处理

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)"，则“圆角”的外观在动画结束时看起来还不错，但是圆度开始平坦并在动画过程中上升，如您所见下一个例子：

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>

【问题讨论】：

我猜你需要它使用 SVG 而不是纯 CSS？
报告 Firefox SVG 错误 here

标签： css animation svg

【解决方案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>

【讨论】：