Open Bug 1734476 Opened 3 years ago Updated 19 days ago

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

Categories

(Core :: SVG, defect)

Firefox 92
defect

Tracking

()

People

(Reporter: ldrummond.contact, Unassigned)

Details

Attachments

(2 files)

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.

Component: Untriaged → SVG
Product: Firefox → Core

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

For more information, please visit auto_nag documentation.

Flags: needinfo?(aethanyc)
Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(aethanyc)

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.

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.

Attached video 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).

Blocks: 1883285
No longer blocks: 1883285
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: