jQuery SVGを使用して、画像も子要素として持つ図形を動的に描画しています。私のマークアップは次のようになります
<g class="svg_hexagon" transform="matrix(1, 0, 0, 1, 0, 0) ">
<polygon points="377,191 327,278 226,278 176,191 226,104 327,104 377,191" stroke="none" fill="#ffffff"></polygon>
<g class="front_face"> … </g>
<g class="back_face" style="opacity: 0;">
<polygon points="377,191 327,278 226,278 176,191 226,104 327,104 377,191" stroke="none" fill="rgba(245,245,245,0.8)"></polygon>
<image x="303" y="191" width="47" height="47" preserveAspectRatio="defer xMaxYMax" href="resources/img/ui/future.svg"></image>
<image x="253" y="231" width="47" height="47" preserveAspectRatio="defer xMaxYMax" href="resources/img/ui/biceps.svg"></image>
<image x="203" y="191" width="47" height="47" preserveAspectRatio="defer xMaxYMax" href="resources/img/ui/future.svg"></image>
</g>
ユーザーが要素 (クラス: svg_hexagon) にカーソルを合わせると、スケールと変換の変換が適用されます。transform="matrix(1.3, 0, 0, 1.3, x, y)
スケールは、六角形のすべての子要素に影響し、外部イメージにも影響します。問題は、Mac OS の Safari 6.0.5 で画像がぼやけて表示されることです。同じシステムの Firefox と Chrome で問題なく動作します。
ファイアフォックス
サファリ
関連する可能性のあるこのバグを見つけました。ここのテストケースを参照してください。この例は、FIrefox または Chrome でも正常に動作しますが、Safari では動作しませんが、バグには「解決済み」とフラグが付けられています。
これを Safari で修正する回避策はありますか? キャッシングなどを防ぐために画像をリロードするかもしれませんか？助けてくれてありがとう！=)