Позиционирование текста SVG

Question

Мне нужно расположить и анимировать текст SVG следующим образом. Начальная позиция (символ канала представляет x = 0):

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

и конечная позиция:

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

Чтобы сделать это, я считаю, что мне нужно знать размер во время выполнения текста и сделать что-то вроде:

    <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>

Возможно ли что-то подобное (в частности, я имею в виду использование SOME_TEXT_1_LENGTH, который не является допустимым SVG, но математически - это то, что мне нужно)?

Answer 1

Вы уже используете text-anchor = "end" для первого состояния и text-anchor = "start" для конечного состояния? Анимация привязки текста даст вам дискретный переход, и вам даже не нужно будет менять позицию x, если я правильно понял ваш пример.

Однако, если вам не нужна дискретная анимация, тогда один из способов - определить длину текста во время выполнения, как вы предлагали, например, вы можете использовать метод getComputedTextLength для рассматриваемого текстового элемента. чтобы получить длину текста.