CSS transforms on SVG elements: percentage values not working for translate functions

RESOLVED FIXED

Status

()

Core
SVG
RESOLVED FIXED
2 years ago
a year ago

People

(Reporter: Ana Tudor, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

2 years ago
Applying a CSS translate transform like translate(100%) or translateY(50%) on an SVG element does not work in Firefox. The spec says that the translation parameters can be lengths or percentages http://dev.w3.org/csswg/css-transforms/#two-d-transform-functions but, in this case, the percentage values don't work (they don't work in the case of transform-origin either https://bugzilla.mozilla.org/show_bug.cgi?id=891074 ).

This works in Chrome/ Opera and Safari. IE does not implement CSS transforms on SVG elements yet.
Component: Untriaged → SVG
Product: Firefox → Core

Comment 1

2 years ago
This now works provided svg.transform-origin.enabled is true
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Depends on: 923193
Resolution: --- → FIXED

Comment 2

a year ago
This is still an issue. Percentages are not working.

Comment 3

a year ago
(In reply to barrett.harber from comment #2)
> This is still an issue. Percentages are not working.

Create a new bug if you still have issues. It's pretty likely you either believe Chrome's implementation is correct (it isn't per the specification) or that you are depending (or should depend) on transform-box
You need to log in before you can comment on or make changes to this bug.