SVG で個々のフレームを生成し、rsvg-convert を使用して PNG にレンダリングすることでムービーを作成するサーバー側ソフトウェアを作成しています。このムービーでは、SVG 内のテキストに文字ごとに効果を適用する必要があります。SVG テキスト要素では、各文字に個別のスタイルを適用できないため、文字ごとに個別のテキスト要素を使用してテキストをレンダリングする必要があります。
私の質問は、各文字の x 軸の位置を取得する最良の方法は何ですか。そのため、テキストを文字ごとに描画すると、単一のテキスト要素で描画されたテキストと同じように見えます。
すなわち..
<text x="100" y="100">aic</text>と同一<text x="?" y="100">a</text>
<text x="?" y="100">i</text> <text x="?" y="100">c</text>
これは私が持っている 1 つの解決策です。ブラウザーでアニメーションを準備するときに、SVG テキスト要素の getExtentOfChar() メソッドを使用し、そのメタデータをサーバーに渡します。ブラウザの実装、インストールされたフォント、ブラウザのバグなどのバリエーションにさらされるため、これは好きではありません。また、テストが難しくなり、スクリプトからこれらのムービーを自動的に生成できなくなります。
freetype2 または Pango ライブラリを直接操作する必要があると思いますが、誰かがこの問題を既に解決していることを願っています。