While working on a project on Stack Overflow, I noticed a potential bug in Firefox when animating a line with stroke-linecap="round" and
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>When viewed in Chrome:
https://i.sstatic.net/qS0zw.png
However, this is how it appears in Firefox:
https://i.sstatic.net/5H8Rj.png
I discovered that this issue does not occur if the path is not animated.
Any suggestions on how to resolve this problem?
UPDATE
In addition, after some adjustments to the code:
If I change the
transform="scale(.1,1)"transform="scale(1,1)", the round cap looks fine at the end of the animation, but it starts off flat and then rounds up during the animation as shown in the following example:
https://i.sstatic.net/CyUHI.png
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>