Closed
Bug 1381201
Opened 8 years ago
Closed 8 years ago
SVG: Incorrect behaviour when transitioning a transform
Categories
(Core :: SVG, defect, P2)
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/
Updated•8 years ago
|
Status: UNCONFIRMED → NEW
Component: Untriaged → SVG
Ever confirmed: true
Product: Firefox → Core
Updated•8 years ago
|
Priority: -- → P3
Comment 1•8 years ago
|
||
Louis, could you confirm that whether it's a regression or not?
Assignee | ||
Comment 2•8 years ago
|
||
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)
Assignee | ||
Comment 4•8 years ago
|
||
(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.
Updated•8 years ago
|
Blocks: svg-enhance
Attachment #8889787 -
Attachment is obsolete: true
Assignee | ||
Updated•8 years ago
|
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.
Description
•