SVG(ウェブブラウザ用)では、<text>
要素を追加してテキストを追加すると、テキスト文字列のレンダリングされる幅は、テキスト。SVGテキスト - ズームの長さによってズームの長さが変わる
「mmmmmmmmmmmmmmmmmmmmmmmmmmA」をテキストとして追加すると、最後の文字と交差する垂直線(または他の正確に配置された要素)を描きたいと思います。うまく動作しますが、ズームアウトするとテキストの長さが短くなったり長くなり、テキストが適切な場所のテキストと交差しなくなります。エラーは+/- 5文字幅になりますが、これは許容できません。また、150%と160%のズームは3文字の長さを追加できますが、155%の長さは2文字分短くなります。
私のズームは、キャンバスのルート要素でスケール変換(<g>
)として実装されています。 私はfont-sizeに1000xを掛けようとしましたが、浮動小数点エラーだったにもかかわらず結果が同じであれば、zoom-transformで同様に縮小しました。
全長を調整すると思われるtextLength
-attribute [1]が見つかりました。テキストは常に私が選択したところで終わりますが、Webkitのみで動作します。 FirefoxとOperaはこの価値についてはまったく気にしていないようだ(IE9ではまだ試していない)。
手作りのフォントアウトラインを使用せずにテキストを正確に配置する方法はありますか? WebKitのビルド以降
[1]構造のhttp://www.w3.org/TR/SVG11/text.html#TextElementTextLengthAttribute
更新
スニペット私が使用している
<svg>
<g transform="scale(1)"> <!--This is the root, i'm changing the scale of this element to zoom -->
<g transform="scale(0.014)"> <!--This is a wrapper for multi-line text, scaling, other grouping etc -->
<text font-size="1000" textLength="40000">ABDCDEFGHIJKLMNOPQRSTUVXYZÅÄÖabcdefghijklmnopqrstxyzåäö1234567890</text>
</g>
</g>
オペラを使って別のテストを行いましたが、そこでは「ほとんど」動作しているようです。 textLengthを設定した場合、テキストは最終的な位置にほぼ近づくように拡大縮小されます。例えば、2倍長くすると2倍長く見えますが、ズームインとズームアウトでも+/- 3文字の幅がシフトします。 Build 1156.アップデートの例を参照してください。 – skco
btw、あなたが送ったテストケースは、Chromeの最新のユーザーバージョンで正常に動作します。 – skco
完全なテストケースを持ったメールを[email protected]に無料で送ってください。それをw3c svg testsuiteに追加することを検討します。 –