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来获取文本的长度。