Rotate SVG image element using d3

Question

I'd like to rotate an image inside a SVG element using d3.js

This is the structure of the elements:

Searching around it seemed that this could be an easy task. The first thing I tried was to edit as HTML the image element and insert the attribute transform="rotate(90)" , the image however disappeared, even removing this attribute I couldn't get the original image back.

What I need to do is to rotate the image element as it was always in vertical position.. By that I mean that if I get an image that has an orientation of 90 degress clockwise, I want to rotate 90 degrees anticlockwise. If I get an image with an orientation of 270 degrees, I need to rotate it 270 degrees anticlockwise, and so on.

I get from the back-end this orientation value so I would need a function to update the rotation of the image, but even this basic rotation of the image in the browser didn't work, I don't know what I'm supposed to do.

Not even sure if I should rotate the image element or the SVG itself.. Or even the SVG's container (in the screenshot the div with class svg-container ).

Another thing I tried is using a css class but the image was cropped. Classes I used are the ones in this answer (tried for the image and its containers).

Any help is highly appreciated, thank you

Answer 1

Differences to be figure out between SVG attribute and CSS style:

• unit: svg attribute do not need specify unit while css style should specify an unit.

   <- svg -> <svg> <imgage transform="translate(100, 100) rotate(90)" href="url or base64" /> </svg> <- html -> <img style="transform:translate(100px, 100px) rotate(90deg);" src="url or base64"

• css style have transform-origin and the default value to be the element's center

  <- html: the default transform-origin to be: (50px, 50px) -> <img width="100" height="100" style="rotate(90deg);" src="url or base64" /> <- svg need first translate to the center then rotate -> <svg> <imgage width="100" height="100" transform="translate(50, 50) rotate(90)" href="url or base64" /> </svg> <- html -> <img style="transform:translate(100px, 100px) rotate(90deg);" src="url or base64"

Hoping my comment could help.