CODEWITHSUNDEEP
xmlsvg
pho0
pho0

Reputation: 1751

Positioning of SVG text

I need to position and animate SVG text as follows. The start position is (the pipe character represents x=0):

.................|..................
      SOME_TEXT_1 
SOME_OTHER_TEXT_2

and the end position is:

.................|..................
                  SOME_TEXT_1 
                  SOME_OTHER_TEXT_2

To do this, I believe I need to know the size at runtime of the of the text and do something like:

    <animateMotion path="M 0 0 L SOME_TEXT_1_LENGTH 0" begin="0s" dur="1.5s" fill="freeze" />
    <text x="0 - SOME_TEXT_1_LENGTH" y="100" font-family="Arial" font-size="36" fill="#ffffff">SOME_TEXT_1</text>

Is something like this possible (specifically, I'm referring to my usage of SOME_TEXT_1_LENGTH which isn't valid SVG but mathematically is what I would need)?

Upvotes: 1

Views: 1152

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

Do you already use text-anchor="end" for the first state, and text-anchor="start" for the end state? Animating text-anchor will give you a discrete transition, and you wouldn't even need to change the x position if I understood your example correctly.

However, if you don't want a discrete animation, then one way is to figure out the text length at runtime as you suggested, you can e.g use the method getComputedTextLength on the text element in question to get the length of the text.

Upvotes: 1

Related Questions