Я использую 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>
When the user hovers over an element (class: svg_hexagon) a scale and translate tranformation is beeing applied. transform="matrix(1.3, 0, 0, 1.3, x, y)
Масштаб влияет на все дочерние элементы шестиугольной формы, а также на внешние изображения. Проблема в том, что изображения отображаются размыто в Safari 6.0.5 на Mac OS. Он отлично работает в Firefox и Chrome в той же системе.
Файрфокс
Сафари
Я обнаружил эту ошибку, которая может быть связана, см. здесь. Этот пример также отлично работает в FIrefox или Chrome, но не в Safari, хотя ошибка помечена как «ИСПРАВЛЕНО ИСПРАВЛЕНО».
Есть ли обходной путь, чтобы исправить это в Safari? Может быть, перезагрузить изображение, чтобы предотвратить кеширование или что-то в этом роде? Спасибо за любую помощь! знак равно
