Raphael JSのワードラップJS/SVG

Question

RaphaelJSのボックス内でどのように単語をラップするのですか？または、一般的にブラウザベースのSVGですか？

this threadが見つかりましたが、意味がありません。彼らは "widthToCharNum"を使用すると言いますが、私が知る限り、このスレッドはインターネット上で使用されている唯一の場所です。彼らは "幅"属性の使用を提案しますが、これは効果がありません。

Answer 1

テキストラッピングはに組み込まれていません。 RaphaelまたはSVG仕様です。期間。 HTMLの世界から来て、私はかなり衝撃的なテキストのラッピングがないことを発見しました。

しかし、あまり難しくすることなく自分で行うことができます。詳細と例については、this questionを参照してください。残念ながら、動的に動作させるにはクライアント側のサイクルを焼かなくてはなりません。

Answer 2

tspanタグは単語ラップの錯覚を与えることができますが、単語ラップ機能は組み込まれていません。

tspanタグはテキストタグと同じですが、テキストタグ内とその内側にネストすることができます。 'dy'属性と組み合わせると、これはSVG 1.1での単語ラップの錯覚を許します。 'dy'は描画された最後のグリフ（文字）を基準にしていることに注意してください。 http://tutorials.jenkov.com/svg/text-element.htmlにtspanを使用する方法に関するチュートリアルがあります。

http://www.xml.com/pub/a/2002/09/11/quint.htmlの記事も役に立ちます。

Answer 3

svg.jsライブラリにはsvg.textflow.jsプラグインがあります。それは超高速ではありませんが、それはトリックを行います。オーバーフローしたテキストもデータ属性に格納するので、連続して流れる列を作成するのに使用できます。 Here the text flow example page。

Answer 4

私は少し遅れていることは知っていますが、私のRaphael-paragraphプロジェクトに興味があるかもしれません。

これは、最大幅と高さの制約、行の高さ、テキストスタイルの設定で自動ラップされた複数行のテキストを作成できる小さなライブラリです。それはまだかなりベータ版であり、多くの最適化が必要ですが、あなたの目的のためにはうまくいくはずです。

使用例とドキュメントは、GitHubページで提供されています。