可能的错误：在动画中，Firefox中的stroke-linecap =“ round”会失真

Question

当我意识到用stroke-linecap="round"和vector-effect="non-scaling-stroke"为一行动画时，这可能是Firefox中的错误时，我正在回答有关Stack Overflow的问题。

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>

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>