Rotate SVG without misplacing the image - svg

Question

I have this svg "code"
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="34">
<path transform="rotate(0 10 17)" fill="#6699FF" d="M 0.06,25.03 C 0.06,25.03 4.06,20.97 4.06,20.97 4.06,20.97 3.97,5.06 3.97,5.06 3.97,5.06 9.94,0.03 9.94,0.03 9.94,0.03 15.78,5.09 15.78,5.09 15.78,5.09 16.03,21.06 16.03,21.06 16.03,21.06 19.94,25.00 19.94,25.00 19.94,25.00 19.97,30.09 19.97,30.09 19.97,30.09 10.06,20.97 10.06,20.97 10.06,20.97 10.05,23.00 10.05,23.00 10.05,23.00 19.91,32.03 19.91,32.03 19.91,32.03 19.94,33.97 19.94,33.97 19.94,33.97 17.97,33.97 17.97,33.97 17.97,33.97 10.03,26.94 10.03,26.94 10.03,26.94 10.05,29.01 10.05,29.01 10.05,29.01 15.94,34.00 15.94,34.00 15.94,34.00 12.00,33.94 12.00,33.94 12.00,33.94 10.00,32.00 10.00,32.00 10.00,32.00 8.00,34.03 8.00,34.03 8.00,34.03 4.00,34.00 4.00,34.00 4.00,34.00 9.97,29.01 9.97,29.01 9.97,29.01 9.97,26.94 9.97,26.94 9.97,26.94 2.00,33.96 2.00,33.96 2.00,33.96 0.00,33.98 0.00,33.98 0.00,33.98 0.02,32.00 0.02,32.00 0.02,32.00 9.96,23.00 9.96,23.00 9.96,23.00 9.95,20.98 9.95,20.98 9.95,20.98 0.00,30.00 0.00,30.00 0.00,30.00 0.06,25.03 0.06,25.03 Z" />
<path transform="rotate(0 10 17) translate(0 0)" fill="white" d="M 8.04,17.04 C 8.04,17.04 7.98,11.04 7.98,11.04 7.98,11.04 5.00,11.00 5.00,11.00 5.00,11.00 10.00,6.04 10.00,6.04 10.00,6.04 14.96,11.02 14.96,11.02 14.96,11.02 12.02,11.04 12.02,11.04 12.02,11.04 12.02,17.04 12.02,17.04 12.02,17.04 8.04,17.04 8.04,17.04 Z" />
</svg>
its a vessel with a arrow inside.
I am trying to rotate this "picture", (i need to rotate it on 360 degree).
When I change rotate(0 10 17) to rotate(90 10 17) it gets cut away. That's because i don't rotate it from the center of the image.
I tried using this formula to calculate the center but i couldn't manage to do it myself
x = 34; y = 20; o = 4.71238898 //(degrees to radiants) ;
a = Math.abs(x * Math.sin(o)) + Math.abs(y * Math.cos(o));
b = Math.abs(x * Math.cos(o)) + Math.abs(y * Math.sin(o));
I am really bad with those math/svg problems, i am hoping someone can assist me.
Thanks

Answer 1

The centre of rotation is correct. But the trouble is now that it is rotated, your graphic isn't 20x34 any longer, it is 34x20.
So the first thing you have to do is update the width and height.
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="20">
That's not the final solution of course, because the centre of this new 34x20 SVG is in a different place to the centre of the old 20x34 one. One solution would be to work out a different centre of rotation that would work so that the graphic rotated around into the right position in the new rectangle.
That's a bit tricky. Luckily there is a much simpler way. We can just add a viewBox to the SVG to tell the browser the dimensions of the area that the rotated symbol occupies. The browser will reposition it for us.
The four values in a viewBox attribute are:
<leftX> <topY> <width> <height>
We already know the width and height (34 and 20), so we just need to work out the left and top coords. Those are obviously just the centre-of-rotation less half the width and height respectively.
leftX = 10 - (newWidth / 2)
= 10 - 17
= -7
topY = 17 - (newHeight / 2)
= 17 - 10
= 7
So the viewBox attribute needs to be "-7 7 34 20".
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="20" viewBox="-7 7 34 20">
<path transform="rotate(90 10 17)" fill="#6699FF" d="M 0.06,25.03 C 0.06,25.03 4.06,20.97 4.06,20.97 4.06,20.97 3.97,5.06 3.97,5.06 3.97,5.06 9.94,0.03 9.94,0.03 9.94,0.03 15.78,5.09 15.78,5.09 15.78,5.09 16.03,21.06 16.03,21.06 16.03,21.06 19.94,25.00 19.94,25.00 19.94,25.00 19.97,30.09 19.97,30.09 19.97,30.09 10.06,20.97 10.06,20.97 10.06,20.97 10.05,23.00 10.05,23.00 10.05,23.00 19.91,32.03 19.91,32.03 19.91,32.03 19.94,33.97 19.94,33.97 19.94,33.97 17.97,33.97 17.97,33.97 17.97,33.97 10.03,26.94 10.03,26.94 10.03,26.94 10.05,29.01 10.05,29.01 10.05,29.01 15.94,34.00 15.94,34.00 15.94,34.00 12.00,33.94 12.00,33.94 12.00,33.94 10.00,32.00 10.00,32.00 10.00,32.00 8.00,34.03 8.00,34.03 8.00,34.03 4.00,34.00 4.00,34.00 4.00,34.00 9.97,29.01 9.97,29.01 9.97,29.01 9.97,26.94 9.97,26.94 9.97,26.94 2.00,33.96 2.00,33.96 2.00,33.96 0.00,33.98 0.00,33.98 0.00,33.98 0.02,32.00 0.02,32.00 0.02,32.00 9.96,23.00 9.96,23.00 9.96,23.00 9.95,20.98 9.95,20.98 9.95,20.98 0.00,30.00 0.00,30.00 0.00,30.00 0.06,25.03 0.06,25.03 Z" />
<path transform="rotate(90 10 17) translate(0 0)" fill="white" d="M 8.04,17.04 C 8.04,17.04 7.98,11.04 7.98,11.04 7.98,11.04 5.00,11.00 5.00,11.00 5.00,11.00 10.00,6.04 10.00,6.04 10.00,6.04 14.96,11.02 14.96,11.02 14.96,11.02 12.02,11.04 12.02,11.04 12.02,11.04 12.02,17.04 12.02,17.04 12.02,17.04 8.04,17.04 8.04,17.04 Z" />
</svg>
Update
If you need to do arbitrary angles, then there is a better method, using Javascript.
Apply the transform to the paths
Call getBBox() on the SVG to get the dimensions of its content.
Use those values to update the viewBox and the width and 'height`
var angle = 145; // degrees
var mysvg = document.getElementById("mysvg");
var paths = mysvg.getElementsByTagName("path");
// Apply a transform attribute to each path
for (var i=0; i<paths.length; i++) {
paths[i].setAttribute("transform", "rotate("+angle+",10,17)");
}
// Now that the paths have been rotated, get the bounding box
// of the SVG contents
var bbox = mysvg.getBBox();
// Update the viewBox from the bounds
mysvg.setAttribute("viewBox", bbox.x + " " + bbox.y + " " +
bbox.width +" "+ bbox.height);
// Update the width and height
mysvg.setAttribute("width", bbox.width + "px");
mysvg.setAttribute("height", bbox.height + "px");
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" width="20" height="34">
<path fill="#6699FF" d="M 0.06,25.03 C 0.06,25.03 4.06,20.97 4.06,20.97 4.06,20.97 3.97,5.06 3.97,5.06 3.97,5.06 9.94,0.03 9.94,0.03 9.94,0.03 15.78,5.09 15.78,5.09 15.78,5.09 16.03,21.06 16.03,21.06 16.03,21.06 19.94,25.00 19.94,25.00 19.94,25.00 19.97,30.09 19.97,30.09 19.97,30.09 10.06,20.97 10.06,20.97 10.06,20.97 10.05,23.00 10.05,23.00 10.05,23.00 19.91,32.03 19.91,32.03 19.91,32.03 19.94,33.97 19.94,33.97 19.94,33.97 17.97,33.97 17.97,33.97 17.97,33.97 10.03,26.94 10.03,26.94 10.03,26.94 10.05,29.01 10.05,29.01 10.05,29.01 15.94,34.00 15.94,34.00 15.94,34.00 12.00,33.94 12.00,33.94 12.00,33.94 10.00,32.00 10.00,32.00 10.00,32.00 8.00,34.03 8.00,34.03 8.00,34.03 4.00,34.00 4.00,34.00 4.00,34.00 9.97,29.01 9.97,29.01 9.97,29.01 9.97,26.94 9.97,26.94 9.97,26.94 2.00,33.96 2.00,33.96 2.00,33.96 0.00,33.98 0.00,33.98 0.00,33.98 0.02,32.00 0.02,32.00 0.02,32.00 9.96,23.00 9.96,23.00 9.96,23.00 9.95,20.98 9.95,20.98 9.95,20.98 0.00,30.00 0.00,30.00 0.00,30.00 0.06,25.03 0.06,25.03 Z" />
<path fill="white" d="M 8.04,17.04 C 8.04,17.04 7.98,11.04 7.98,11.04 7.98,11.04 5.00,11.00 5.00,11.00 5.00,11.00 10.00,6.04 10.00,6.04 10.00,6.04 14.96,11.02 14.96,11.02 14.96,11.02 12.02,11.04 12.02,11.04 12.02,11.04 12.02,17.04 12.02,17.04 12.02,17.04 8.04,17.04 8.04,17.04 Z" />
</svg>