2015-03-13 4 views
0

Комплексный логотип, который я показываю, показывает артефакты между различными формами. Это не пробелы в произведениях, а артефакты наложения.Safari svg gaussian blur (feGaussianBlur) wont render stdDeviation меньше 1?

Я нашел хорошее решение для удаления этих артефактов, чтобы замаскировать объект и применить очень небольшое гауссовское размытие (feGaussianBlur) с низким значением stdDeviation (0.125).

Хром, firefox и даже IE отображают его хорошо. Однако Desktop Safari (8.0), как представляется, всегда обрабатывает размытие, как если бы значение было как минимум 1px (или, похоже, похоже), что делает его слишком размытым, чтобы быть приемлемым представлением логотипа.

Есть ли способ сделать поддержку сафари значением от 0 до 1?

ответ

1

Я обнаружил, что установка stdDeviation размытия до 0 желаемого эффекта во всех браузерах. Safari необходимо, чтобы фильтры цветной интерполяции были установлены в «sRGB» (по умолчанию для других браузеров: SVG gaussian blur in Safari unexpectedly lightens image).

Вот где я попал, кажется, работает стабильно, но мы будем использовать формат PNG на данный момент и компенсировать привет DPI устройств:

<filter id="blur" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB"> 
     <feGaussianBlur in="SourceGraphic" stdDeviation="0" /> 
    </filter> 
0

Вы можете настроить размытия, используя элементы и feFuncA>. Следующее затянет ваше размытие, но, возможно, сохранит ваши артефакты, если нет, поиграйте с массивом tableValues.

<feComponentTransfer > 
    <feFuncA type="table" tableValues="0 0 0.5 1"/> 
</feComponentTransfer>