CODEWITHSUNDEEP
cssanimationsvg
enxaneta
enxaneta

Reputation: 33054

Possible bug: stroke-linecap="round" get distorted in Firefox while animated

I was answering a question on Stack Overflow when I realised that it may be a bug in Firefox while animating a line with stroke-linecap="round"with a 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>

This is the end result in Chrome:

enter image description here

And this is in Firefox:

enter image description here

Please note that this is not happening if the path is not animated.

How can I avoid this problem?

UPDATE

Furthermore: tweaking the code I've come up with this: If I change the transform="scale(.1,1)" to transform="scale(1,1)" the aspect of the "roundcapness" looks OK at the end of the animation, however the roundness begins flat and bump up during the animation as you may see un the next example:

enter image description here

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>

Upvotes: 1

Views: 204

Answers (1)

enxaneta
enxaneta

Reputation: 33054

Problem solved after removing the transform attribute of the path. Now it works correctly on 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>

Upvotes: 0

Related Questions