1734476 - 'vector-effect: non-scaling-stroke' attribute does not work when animating SVG scale.

Status: NEW

(Core :: SVG, defect)

Description

[ldrummond.contact]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36

Steps to reproduce:

Create an SVG element with a child Circle element. Give that circle element a stroke of 8px. Apply the attribute 'vector-effect: non-scaling-stroke' either inline or in CSS. Add a transition and scale change to that element (either with CSS transition and transform with a hover state, CSS animation or SMIL transform).

See reproduction on codepen here:
https://codepen.io/ldrummond1/pen/GREVEvO?editors=1100

Actual results:

The Circle element's stroke grows with the transform, then at an arbitrary point in the animation, snaps to the correct value.

Expected results:

The Circle element's stroke should remain at 8px throughout the animation.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:TYLin, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 2

[jarataraj]

I am experiencing a similar problem, likely resulting from the same bug. For an svg animated with the javascript Web Animations API, the non-scaling-stroke vector affect seems to apply only after the animation has completed and the mouse is moved or clicked.

Comment 3

[Tom Hargreaves]

Minimalist repro:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <style>
    @keyframes sc {
      to { transform: scale(2); }
    }
    #f {
      transform-origin: center;
      animation: sc 1s steps(2,end) infinite;
      vector-effect: non-scaling-stroke;
    }
  </style>
  <rect id="f" x="40" y="40" width="20" height="20" stroke-width="20" stroke="black" fill="none"/>
  <rect x="30" y="30" width="40" height="40" stroke-width="20" stroke="black" fill="none"/>
</svg>

Expected output: black square with blinking white dot in the centre.
Actual output: black square, no dot. (Fx 113.0.1, Ubuntu)

Works in Chrome.

Comment 4

[Christopher Kirk-Nielsen]

Attachment: firefox-svg-scale-1.mp4

I am running into the same issue and it is causing pretty dramatic effects, especially with scaling from near-zero (scaling from zero doesn't animate at all, see bug 1883285).

Comment 5

[Christopher Kirk-Nielsen]

Attachment: firefox-svg-scale-3.mp4