0
226
VistasRotate SVG image element using d3
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
1 Respuestas
Responde la pregunta0
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.