Question

I am just getting started with SVG and am now trying out rotating objects.

I have the initial canvas and have created my own drag and drop function so on mousedown the drag is initialized and mouseup it stops. The problem i’m having is when I rotate an object, it seems to change the x and y. This is visible when i’m trying to drag an object. Does anyone know how to get around this so the x and y get “normalized” in relation to the rotate angle?

Here’s my code.

<svg version="1.1" width="900" height="400"><text x="10" y="10" id="text_0" width="200" height="40" transform="rotate(45, 0, 0)">SVG test</text></svg>

Thanks

Answer 1

rotate parameters give you the angle and the center of the rotation (see MDN for example). And what about the width and height attributes in your text anyways? This is not part of the standard as of here. If you want to change the size of your text, do so using font-size in the style.

If you want to rotate the text around its (the text element’s) center you may use for example the following:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" width="900" height="400"  xmlns="http://www.w3.org/2000/svg">
   <text x="10" y="10" id="text_0" transform="rotate(45, 10, 10)" style="dominant-baseline: middle; text-anchor: middle;">
     SVG test 
   </text>
 </svg>