multiple transform css styte

[mariadafon]

Hi!

I am trying to reflex (scaleY(-1)) and rotate (rotate(90deg)) a snap image and it is not working. It rotates the image in another angle. This 'rotate(90deg) scaleY(-1)' works fine in css, but when I try to apply it as an atrr of a snap image it doesn't work. var img = snap.image( .... img.attr({ "dominant-baseline": "middle", "transform": 'rotate(90deg) scaleY(-1);' });
Which is the way to implement it?

best,

María

[ibrierley]

I think you're maybe getting a little confused between css and svg attributes (not surprising!). They aren't the same, and it depends slightly what you want to do, whether to use svg attributes or css. So attr() sets the svg attributes, you can also set attr('style','somecss'), or use css as you would normally with html. (it can get a bit more complicated than that, as snap will try and use css attributes if the svg one doesn't exist iirc).

As an example, there is an SVG 'fill' and a CSS 'fill'.

Typically I would use svg attributes, but you can mix (transform an svg attribute, but style it's color with css etc).

Reason I say this, is that 'rotate(90deg)' is a css attribute, not an svg one. The svg equivalent is 'rotate(90)'. But Snap tries to make this a bit easier. You can build a string of transform commands, t=translate, s=scale, r=rotate, so you can pass Snap a string "t10,10r90s2,2' to translate 10,10, rotate90, scale 2,2.

Similar with ScaleY. This doesn't exist in SVG, just in CSS I think.

If you want to rotate 90, I would do img.transform('r90') // be careful if you want it to rotate it around its center or around 0,0 you may want extra params. 'r90,100,100'

or img.attr('transform', 'r90');

to ScaleY 2, you can use transform('s1,2');

or all together transform('r90s1,2'); // be wary of center of original for rotations as mentioned earlier.

[mariadafon]

Thanks for your answer! It helps a lot. As you have said, I found not problem with rotation as svg atrr. But, the thing is I still need to reflex the image. I am completely new with js, css and html. If you could explain me the easiest way to implement both transformation to the snap image, it will be very helpful.

Best,

María

[ibrierley]

Do you mean mirror the image, when you say 'reflex' ? Have you tried scale 1,-1 (i.e 's-1,1') if so?

[mariadafon]

Thank you very much! It works =)