Chrome 29、IE10、Safari 5.1 (Windows)、Safari 6.0.5 (Mac)、および Opera 16 のほとんどの最新ブラウザーで、テキスト アニメーション/スケーリングのアーティファクトが発生しています。Firefox (バージョン 23 でテスト済み) のみが正常に動作しています (すべてWindows では、Safari 6 を除きます)。
例：
「uf」タグにカーソルを合わせます。テキストが拡大されます。タグを離れると、縮小中に「f」が跡を残します。
バックグラウンド：
これはタグ クラウドの一部です。SVG 要素は、会社の内部ライブラリ (jsfiddle でハードコーディング) によって生成されます。このスケーリング オン ホバー機能を追加するために実装を強化しました。
transform: scale(2) を使用するか、現在のフォントサイズ遷移 (:hover -> 2em) を使用するかは問題ではありません。これらのアーティファクトなしで CSS3/SVG-Animations を使用して svg-text 要素をスケーリングする方法を見つけられませんでした。
注: これは、'f' や 't' などの特定の文字でのみ発生するようです。しかし、私が試したすべてのフォントで
私はいくつかの回避策を試しました：
レンダリングを改善するためのさまざまな CSS3 プロパティ:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
-webkit-transform: translate3d(0,0,0);
または使用して
-webkit-transform: scale(1.1);
さらには
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="2" to="1" additive="sum" begin="mouseover" dur="1s" fill="freeze" />
上記のすべてのブラウザで同じ効果があります。
WebKit、Presto (Opera)、Internet Explorer 10 のすべてに同じレンダリング バグがあるとは思えないため、まだバグ レポートを提出していません。私がまだ気づいていない、SVG 内のテキストをスケーリングする別の方法があることを願っています。
助けてくれてありがとう！
編集：タイプミス