CODEWITHSUNDEEP
javascriptsvgrotation
Kira
Kira

Reputation: 1443

Rotating contents of an SVG text element

I 'm working on rotating the text in an SVG text element. Whene a rotation is performed using transform:rotate(angle,x,y) entire text element is rotated. This creates an issue that positioning of the text element will be modified.

I understand this behavior, because rotaion causes tanslation of co-ordinates. But what I want to do is, the 'x' and 'y' position should always be the bottom of text element.

For example, the following code will create a text element at 50, 50

<text x='50' y='50'>My Text </text>

Now, (left, bottom) of text is (50, 50). If I rotate it by 90, then (left, top) will be 50, 50.

So, for all kind of rotations, I don't want to change the position of text element. How can I do this?

Upvotes: 2

Views: 906

Answers (2)

Francis Hemsher
Francis Hemsher

Reputation: 3498

EDIT

Sorry for my original answer below...I had not yet had my first cup of coffee;)

Try adding text-anchor="end" and dy="1"

IGNORE BELOW

Try the following:

Text rotate attribute is an object that specifies or receives a list of individual character rotation values. The last rotation value rotates all following characters.

myText.setAttribute("rotate","deg1, deg2, deg3, deg4, ...")

 rotationNumbs=myText.getAttribute("rotate")

~ or ~ [ NumberList = ] myText.rotate [ = NumberList ]

Upvotes: 1

helderdarocha
helderdarocha

Reputation: 23627

You can anchor the text in different positions using text-anchor. For example, if you rotate the text like this:

<text id="mytext" x='50' y='50'>My Text 
  <animateTransform attributeName="transform" begin="0s" dur="5s" type="rotate" 
                    from="0 50 50" to="360 50 50" repeatCount="indefinite"/>
</text>

It will use the upper-left corner as an anchor-point. You can move it to the center using:

<text id="mytext" x='50' y='50' text-anchor="middle">My Text 
  <animateTransform attributeName="transform" begin="0s" dur="5s" type="rotate" 
                    from="0 50 50" to="360 50 50" repeatCount="indefinite"/>
</text>

And now it will rotate anchored in the center: see this JSFiddle.

You might also want to experiment with other anchor and baseline properties, if this is not exactly what you want. See: SVG Spec - 10 Text - 10.9 Alignment properties

Upvotes: 1

Related Questions