次の（簡略化された）SVGがあります。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 120 100" preserveAspectRatio="none" >
<script type="text/ecmascript">
<![CDATA[
function getPathLength(path)
{
alert(path.getTotalLength());
}
]]>
</script>
<rect x="0" y="0" width="100%" height="100%" fill="black"/>
<path id="word" onclick="getPathLength(this);" fill="none" stroke="red" stroke-dasharray="83,83"
d="M 8.90625 3.78125 C 8.5377448 3.8134782 8.1622587 3.965423 7.8125 4.21875 C 6.5568946 6.0743722 5.8966744 8.1275786 5.125 10.15625 C 5.2012388 11.683341 4.3280721 13.093169 4.34375 14.59375 C 3.5435523 17.003468 4.9013748 18.393271 4.125 20.90625 C 3.8249969 23.220653 3.3490969 25.389271 2.96875 27.71875 C 2.775721 29.626027 1.7870007 33.314518 4.6875 33.4375 C 6.6892564 33.267533 8.9446263 33.620664 10.6875 32.53125 C 12.308551 32.345986 13.845824 31.488491 14.96875 30.4375 C 15.336184 29.709947 14.506173 29.249547 15.09375 28.53125 C 15.464699 26.390933 13.333175 28.42555 12.53125 28.4375 C 10.625482 29.096293 8.8511553 29.69647 6.875 29.65625 C 5.6218253 29.22028 6.5435685 27.168764 6.34375 26.03125 C 6.6314225 24.872659 6.8389714 23.78868 7.0625 22.53125 C 7.4982943 20.310119 8.0925706 18.009049 8.5 15.84375 C 9.2688601 14.209069 9.0995411 12.312299 9.71875 10.5625 C 10.027547 9.1134942 10.141384 7.3374588 10.5 5.90625 C 10.999008 4.514099 10.011766 3.6845653 8.90625 3.78125 z ">
<animate attributeName="stroke-dashoffset" begin="0s" from="100%" to="0%" dur="5s" fill="freeze" />
</path>
</svg>
パスをクリックして長さを取得すると、Firefox v16 は 82.4 を報告します... これは、dasharray に使用するものです。しかし、すでにパスの一部が描画されている状態で開始し、それを消去してから完全なパスを再度描画する!? 彼のダサレイの値をいじくり回したところ、110 を使用すると機能しましたが、理由がわかりません!
他のブラウザや新しいバージョンの Firefox はまだ試していません...
注 完全な問題は、パスに変換された単語です。パスは不連続です - 5 つの部分があります ('e'、'z'、'h' のスクリプト形式にはループがあり、最初の文字 'L' は残りの文字と結合されていません)。私がやりたいのは、レーザーが文字を描いているように見せることです。以前の質問で、dashoffset をアニメーション化するとその効果が得られることを知りました。Inkscapeを使用して、ようやくテキストをパスに変換できました。今、私はアニメーション化に問題があります。
dasharray をアニメーション化してみました。これは正しい長さで機能しますが、より大きな完全な単語の例 (長さ 7 文字、長さ 822 単位) では、5 つの不連続部分だけでなく、9 つの異なるパスが機能しているように見えます。完全な単語のダッシュオフセットをアニメーション化しようとすると、アニメーションがまったく表示されません。単語が完全に形成されているように見えます。