SVGテキストの位置付け

次のようにSVGテキストを配置し、アニメーション化する必要があります。SVGテキストの位置付け

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

と終了位置は、次のとおりです：開始位置は、（パイプ文字は、x = 0を示す。）である

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

ができ、この（具体的には、私は有効なSVGはありませんが、数学的に私が必要となるものですSOME_TEXT_1_LENGTHの私の使用方法を参照しています）のようなものです：及びテキストのような何か？

出典

2011-10-21 pho0

最初のステートにtext-anchor = "end"を使用し、endステートにtext-anchor = "start"を使用していますか？テキストアンカーをアニメーション化すると、離散的な遷移が得られます。私があなたの例を正しく理解していれば、xの位置を変更する必要はありません。

離散アニメーションを必要としない場合は、実行時にテキストの長さを示唆する方法の1つですが、問題のテキスト要素のメソッドgetComputedTextLengthを使用して長さを取得できますテキスト

出典

2011-10-24 16:16:10

ありがとうErik！これは正しい答えのようですが、私が実装したときに、テキストは "終了"から "開始"までのアニメーションの代わりにアニメーションの途中で新しい位置に切り替えるだけです。私はこれが私のSVGビューアのバグだと思う。 – pho0

好奇心が強い場合は、私の実装です： – pho0

「新しい位置への途中での切り替え」は、私が記述したものです。「離散アニメーション」（段階的に）。私は、SVG視聴者がここでよりスマートになると思う。 –

答えて

関連する問題