1102145 - CSS transformation not applied to svg subelements (path circle etc)

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[PeterStJ]

User Agent: Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.65 Safari/537.36

Steps to reproduce:

svg
  path.one
  path.two

.one { transform: rotate(90deg) }


Actual results:

Transformation is listed in console but is not applied visually (i.e. path element is not rotated)


Expected results:

Chrome and Safari and IE rotate the single path element according to the css style rule

Comment 1

[Boris Zbarsky [:bzbarsky]]

Can you please attach a testcase showing the problem?  Because as far as I can tell this is working just fine (at least in a current Firefox nightly on Mac).

Comment 2

[Boris Zbarsky [:bzbarsky]]

Attachment: Testcase that shows the rotate working fine for me

Comment 3

[PeterStJ]

Sorry it was my mistake, the actual code was combination of translateX and rotate and because the translation was 0% I thought it was the rotation.

Further testing revealed that transform origin is not working when provided with % values and translate is also not working at all when provided as % values.

test case here: 
http://jsbin.com/numovu/1/edit?html,css,output

adding  0% to the transform origin shows the path but it is not translated properly.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Ah, thanks.

It looks like the percentage basis used in this case is 0.  Per spec, since 'transform-box' is not being used, we should be using the "view-box", which means we should be using the nearest SVG viewport.

Comment 5

[Jonathan Watt [:jwatt]]

Basically this is the same issue as bug 923193. nsDisplayTransform doesn't support percentage values in CSS transforms on SVG right now.

Comment 6

[PeterStJ]

Ok thanks. I will be following the referenced bug report.

Comment 7

[Robert Longson [:longsonr]]

fixed by bug 923193