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

CodePudding user response：

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.