0

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

This is the structure of the elements: structure

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

User1254
  • 85
  • 5

1 Answers1

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.

1Cr18Ni9
  • 1,737
  • 1
  • 12
  • 21