javascript - Webkit ブラウザーでの svg テキストの奇妙な動作

Question

トランスフォームを使用して、マウスホイールで SVG グループをスケーリングしています。このグループには、rect ノードと text ノードが含まれています。Firefox と IE では、これは期待どおりに機能します。四角形とテキストは拡大縮小され、テキストは同じ位置に留まります。しかし、chrome/ipad では、テキストは rect とは異なる方法で変化します: ズームすると、これらのキャプチャのようにテキストが四角形に出入りします:

更新: Robert Longson の回答のおかげで、問題のバグを発見しました。テキスト レンダリングの詳細については、こちらを参照してください。

Answer 1

一部の UA は、フォントが特定のサイズを超える場合にのみヒンティングやカーニングなどのさまざまなフォント効果を適用するため、ズーム時にフォントが一貫したスケーリングを維持しません。

text-rendering="geometricPrecision"絶対的な保証はありませんが、属性を設定すると役立つ場合があります。

それが失敗した場合は、 SVGZoomイベントが発生するたびにバウンディング ボックスを再計算する必要があります。