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

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Ana Tudor]

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.

Comment 1

[Robert Longson [:longsonr]]

This now works provided svg.transform-origin.enabled is true

Comment 2

[barrett.harber]

This is still an issue. Percentages are not working.

Comment 3

[Robert Longson [:longsonr]]

(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