私は、ブラウザーでデザイン アセットを動的に作成する必要があるプロジェクトに取り組んでいます。過去数か月間、canvas を使用してこれを行ってきましたが、現在、クライアントからベクター ベースのアセットを直接作成できるかどうか尋ねられています。
HTML5 SVG を調査したところ、これができるように思えました。raphael.js と svg.js をいじってみたところ、svg.js の方が好きだと判断しました。はるかに軽量で、< IE9 のサポートは私にとって問題ではありません。
SVG の使用に関する私の主な懸念は、テキストを SVG にレンダリングし、テキスト ベクターをベースにして最終的なアセットで使用できるようにする必要があることです。これだけでなく、テキストの境界領域を (最も近いピクセルまで) 完全に測定できる必要があります。これには2つの問題があります：
要素を作成するために標準的な
draw.text()呼び出しを使用するだけ<text>では、フォントをアセットにバンドルする必要があるため、ライセンス上の理由からこれを行うことはできません。テキスト要素の境界領域を取得するための呼び出し
text.bbox()は、高さに関しては不正確です。getClientRect()標準のhtml要素と同じように、実際に使用されている文字ではなく、フォント内の最も高い/最も低い文字の高さを返すだけだと思います。
これらの問題を解決できるソリューションを見つけました。ここでアドバイスを求めています。
draw.path()SVG フォントから取得したパス情報を使用して、グリフを手動でレンダリングできると思います。このようにして、私の最終的なアセットには、どのフォントにも関連付けられていないベクターベースのグリフが含まれbbox()ます。パスを描画した後の呼び出しは、テキストよりも正確になることを願っています。
svg.js を使用してこのグリフ情報を取得できるかどうかは誰にもわかりませんか? または、xml を解析してそこからパス情報を引き出すことによって、手動で行う必要がありますか? また、この状況でカーニングがどのように機能する可能性があるかについて、誰か知っている人はいますか? または、このマニュアルと複雑な方法を実行せずに、上記の問題 1 と 2 を解決する他の方法を知っていますか?