How we can add transform rotate and scale simultaneously in .setAttribute

Question

I'm working on an SVG an I want to add a scale and rotation transform. The rotate value is dynamic and the scale value is constant.

I tried like this:

boxElem.setAttribute("transform", "rotate(" + rotation + "), scale(0.9)");

It is not working. Only the scale value is having an effect. Can anyone tell me how to add multiple properties inside transform in JS.

Answer 1

setAttribute will result in adding the attribute transform like this :

<div transform="rotate(rotation) scale(0.9)"></div>

you need to update the style of the element :

boxElem.style.transform = "rotate(" + rotation + ") scale(0.9)";