2012-02-23 16 views
0

SVGで個々のフレームを生成し、rsvg-convertでPNGにレンダリングすることによってムービーを作成するサーバー側のソフトウェアを作成しています。このムービーでは、SVGのテキストに文字単位でエフェクトを適用する必要があります。 SVGテキスト要素では、各文字に別々のスタイルを適用することができないので、文字ごとに個別のテキスト要素を使用してテキストをレンダリングする必要があります。サーバー上のSVGテキストの個々の文字位置を取得する方法

私の質問は、各文字のX軸の位置を取得する最良の方法は何ですか。文字を1文字ずつ描画すると、1つのテキスト要素で描画された のテキストと同じに見えます。

すなわち。これは私が持っている一つの解決策である<text x="?" y="100">a</text> <text x="?" y="100">i</text> <text x="?" y="100">c</text>

と同じ <text x="100" y="100">aic</text>:ブラウザ上でアニメーションを作成する際に、SVGのテキスト要素のgetExtentOfChar()メソッドを使用して、サーバーにそのメタデータを渡します。ブラウザの実装、インストールされているフォント、ブラウザのバグなどでバリエーションが変わってしまうので、私はこれが好きではありません。また、テストが困難になり、スクリプトからこれらのムービーを自動的に生成できなくなります。

私はfreetype2またはPangoライブラリで直接作業する必要があると思われますが、誰かがこの問題を既に解決したことを願っています。

答えて

2

tspansで文字をラップすると、それらをスタイルすることができます。http://jsfiddle.net/longsonr/qxe4S/それほど簡単ではありませんか?

+0

いいアイデア!私はそれを考えなかった。私はいくつかの文字が場所の周りを飛んで、最終的に正しい形式のテキストにする必要があります最終的に戻って解決する必要があるので、私は必要なすべての効果が十分であるか分からない。 tspan要素にdx、dy、x、yを設定できますが、それは後続のグリフの位置を変更します。しかし、私はこのアイデアが私にある時間を買うかもしれないと思う。 – jdesbonnet

関連する問題