SVG отображаются размытыми в Safari

#html #svg #safari

#HTML #svg #safari

Вопрос:

Я работаю над сайтом и решил попробовать SVG. Мои SVG отображаются так, как они должны отображаться в IE, Firefox и Chrome. Однако в Safari изображения выглядят размытыми. Вот что я делаю в коде:

 <object data="section_3.svg" type="image/svg xml" width="100%" height="722" class="aligncenter" >
    <img src="section_3.png" />
    <svg version="1.1" x="0px" y="0px" width="763" height="1602" viewBox="0 0 763 1602" preserveAspectRatio="xMinYMin meet"></svg>
</object>

Ни за что на свете я не могу понять, почему изображения размыты. Странно то, что когда я увеличиваю / уменьшаю масштаб в Safari, размытость исчезает. Есть ли что-то, чего я не делаю в своем коде? Любая помощь будет высоко оценена. Спасибо!

1. Здесь та же проблема, какую версию Safari вы используете?

2. @FranciscoSalvador В то время я использовал текущую версию Safari. Возможно, он был обновлен с тех пор, как я опубликовал этот вопрос.

Ответ №1:

Добавление -webkit-transform: translate3d(0,0,0) в SVG устранило проблему для меня.

Ответ №2:

Если ваш svg содержит прямые горизонтальные и вертикальные линии, может показаться, что они размываются или становятся резче случайным образом при увеличении и уменьшении масштаба, поскольку им нужно выбрать оптимальный набор пикселей на вашем экране, хотя это обычная функция браузера, а не Safari. Известно, что Safari не поддерживает фильтры или эффекты размытия, но я не знаю, что находится внутри вашего svg. Ваши теги объектов имеют смысл, и ваш запасной вариант .png, но я не понимаю, почему тогда у вас есть теги svg без содержимого.

1. Мой SVG не имеет эффектов размытия, но я не уверен в фильтрах; придется перепроверить это. Что касается тега svg, если я использую тег object для отображения svg, нужен ли мне тег svg вообще? Я думаю, что я этого не делаю, поскольку, кроме размытости в Safari, это отлично работает, используя только мои теги object и img.

2. мы пытались shape-rendering="geometricPrecision" и обсуждаем это на github.com/timmywil/panzoom/issues/548 . Кажется, это сложно решить. Также попробовал решение transform, но пока безуспешно.