2012-02-09 14 views
6

問題:SVGで変数font-face、font-size、position、scale、rotationを使用してRaphaelJSで作成されたSVGテキストを複製する必要があります。SVGで<text>を操作/変換する(バウンディングボックスを追加する)

BUT ...ラファエールは、文字列の実際の高さに依存しない高さを持つテキストの境界ボックスを使用します。境界ボックスの高さはfont-sizeとfont-familyに基づいていますが、実際の文字列とは独立しています。したがって、 "Y"と "、"(同じfont-faceとfont-sizeを持つ)の文字列は同じ高さになります。

SVGのテキストを(PHPで生成して)再作成すると、正しいfont-sizeとfont-familyが得られます。しかし、SVGの高さは実際の文字列とは無関係ではありません。だから、 "、"は、 "Y"よりはるかに低い高さを持つでしょう。この高さの差は、回転と位置決めを壊します。

QUESTION:どのように我々は(基本的にちょうどそれの任意の文字に合う箱のサイズ)RaphaelJSのgetBBoxを複製ので、我々はRaphaelJSから回転や位置を模倣することができます「バウンディングボックス」でSVGを作成するのですか? 注:SVGのtext-> pathを変換することができます。また、フォントファイルにもアクセスできます。

enter image description here

EDIT:その後、回転、スケーリング、次に、位置決めを適用するとは対照的問題は、行列()コマンドを使用して直接変換を上に変換することによって解決されました。

+1

よく質問された、+1。 PHPの例(RaphaelJS関数を使用したJSの例では、右の例の「間違った」バウンディングボックスを生成するために現在使用されているのは何ですか?)から、バウンディングボックスがどこに来るのか分かりませんでした。 –

+0

+1私からも、私もPHPバウンディングボックスの読み方(cc @CamiloMartin)に興味があります。現在私は 'inkscape'を使っていますが(私はここで説明しました)(http://stackoverflow.com/a/10078156/472495)、良い方法があるかどうかは分かります。 – halfer

答えて

1

単語:文章の中で文字の位置を操作し、サーバー上で生成しているSVGを見たい場合は、SVG TSPANを利用して文字の位置を特定できるはずです。手紙をパスに変えることができれば、アルゴリズムが可能になると思います。あなたの英数字フォントセットの相対的な位置の配列を作成することを止めるものは何もありません。私は上記のいくつかが有用であることを願っています...

関連する問題