RaphaelJS のボックス内で単語をラップするにはどうすればよいですか? それとも一般的なブラウザベースの SVG でしょうか?
このスレッドを見つけましたが、意味がありません。「widthToCharNum」を使用するように言われていますが、私が知る限り、インターネット上でこれらの単語が使用されたのはこのスレッドだけです。彼らは「幅」属性を使用することを提案していますが、これは効果がありません。
RaphaelJS のボックス内で単語をラップするにはどうすればよいですか? それとも一般的なブラウザベースの SVG でしょうか?
このスレッドを見つけましたが、意味がありません。「widthToCharNum」を使用するように言われていますが、私が知る限り、インターネット上でこれらの単語が使用されたのはこのスレッドだけです。彼らは「幅」属性を使用することを提案していますが、これは効果がありません。
テキストの折り返しは、Raphael や SVG 仕様には組み込まれていません。限目。HTML の世界から来た私は、テキストの折り返しがないことにかなりショックを受けました。
ただし、それほど難しくなく、自分で行うことができます。詳細と例については、この質問を参照してください。残念ながら、動的に機能させるには、クライアント側のサイクルをいくつか燃やす必要があります。
svg.jsライブラリにはsvg.textflow.jsプラグインがあります。超高速ではありませんが、うまくいきます。オーバーフローしたテキストをデータ属性に格納することもできるため、連続してフローする列を作成するために使用できます。ここにテキスト フローのサンプル ページがあります。
少し遅れていることは承知していますが、私のラファエル段落プロジェクトに興味があるかもしれません。
最大の幅と高さの制約、行の高さ、テキスト スタイルの構成を使用して、自動ラップされた複数行のテキストを作成できる小さなライブラリです。まだかなりベータ版であり、多くの最適化が必要ですが、目的には合っているはずです。
使用例とドキュメントは GitHub ページで提供されています。
tspan タグはワード ラップの錯覚を与えることができますが、組み込みのワード ラップ機能はありません。
tspan タグは text タグと同じですが、text タグ内およびそれ自体内にネストできます。'dy' 属性と組み合わせることで、SVG 1.1 でワードラップの錯覚が可能になります。'dy' は、最後に描画されたグリフ (文字) に相対的であることに注意してください。tspan の使用方法に関するチュートリアルがhttp://tutorials.jenkov.com/svg/text-element.htmlにあります。
http://www.xml.com/pub/a/2002/09/11/quint.htmlの記事も役立つ場合があります。