Closed Bug 1381201 Opened 8 years ago Closed 8 years ago

SVG: Incorrect behaviour when transitioning a transform

Categories

(Core :: SVG, defect, P2)

54 Branch
defect

Tracking

()

RESOLVED DUPLICATE of bug 878346
Tracking Status
firefox56 --- affected

People

(Reporter: paul.lebeau, Assigned: lochang)

References

(Blocks 1 open bug)

Details

Attachments

(1 file, 1 obsolete file)

416 bytes, image/svg+xml
Details
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0 Build ID: 20170628075643 Steps to reproduce: Try the following sample in FF54. Hover over the SVG. <svg width="588px" height="512px" viewBox="0 0 588 512"> <g id="clock_bottom_3" transform="translate(72 306)"> <ellipse fill="blue" cx="87" cy="52" rx="87" ry="52"></ellipse> </g> </svg> #clock_bottom_3 {transition: transform 0.3s;} svg:hover #clock_bottom_3 {transform: translate(72px, 320px);} https://jsfiddle.net/3hvassfh/ Actual results: The animation seems to start from 0,0. Ie. it ignores the initial transform on the element. Expected results: Should just move down by 14px on hover. The workaound is to wrap the element in a container element with no transform. <svg width="588px" height="512px" viewBox="0 0 588 512"> <g id="clock_bottom_3_wrap"> <g id="clock_bottom_3" transform="translate(72 306)"> <ellipse fill="blue" cx="87" cy="52" rx="87" ry="52"></ellipse> </g> </g> </svg> #clock_bottom_3_wrap {transition: transform 0.3s;} svg:hover #clock_bottom_3_wrap {transform: translate(0px, 14px);} https://jsfiddle.net/3hvassfh/1/
Status: UNCONFIRMED → NEW
Component: Untriaged → SVG
Ever confirmed: true
Product: Firefox → Core
Priority: -- → P3
Louis, could you confirm that whether it's a regression or not?
Flags: needinfo?(lochang)
Priority: P3 → P2
I have tested the bug on FF52 & FF53. The bug still appears on both of them. I think it's not a regression.
Flags: needinfo?(lochang)
I will try look into the bug.
Assignee: nobody → lochang
(In reply to Louis Chang [:louis] from comment #2) > I have tested the bug on FF52 & FF53. The bug still appears on both of them. > I think it's not a regression. I have further tested the bug with mozregression. It seems that the bug has existed since we started support svg transition of a transform.
Attached image svg-transform.svg (obsolete) —
Attached image svg-transform.svg
Attachment #8889787 - Attachment is obsolete: true
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: