Я использовал эту маску SVG для оттенков серого в браузерах, где filter: grayscale(100%)
не работает:
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
Некоторое время назад это работало отлично, но теперь я получаю эту ошибку в консоли:
Небезопасная попытка загрузить URL-данные: image/svg + xml; utf8, http://www.w3.org/2000/svg 'height =' 0 ' > # greyscale из фрейма с URL [мой домен здесь]. Домены, протоколы и порты должны соответствовать.
Излишне говорить, что фильтр в оттенках серого больше не работает.
- Можете ли вы объяснить, что происходит не так?
- Можно ли это зафиксировать так, чтобы использовался тот же CSS-код, не возникает ошибка, и фильтр работает?
- Учитывая, что он упоминает тот же домен и протокол, хотя я не знаю, как реализовать решение, поскольку я не понимаю проблему, я могу помещать и связывать файлы в том же домене/поддомене с тем же протоколом, вместо этого использования внешнего URL-адреса.
UPDATE:
Пользователь @Potherca прокомментировал:
... работал в Chrome 52, разбился на Chrome 53...
Это тоже мой опыт. Маска SVG не работает в текущей версии Chrome (версия Chrome 53.0.2785.116), но она работала в предыдущей версии. Он по-прежнему работает в Firefox и Safari.
ОБНОВЛЕНИЕ 2:
Я попробовал его с https
как ...xmlns='http://www.w3.org/2000/svg'...
, но ошибка/ошибка сохраняется.
ОБНОВЛЕНИЕ 3: Как предложил пользователь @Potherca, перемещение строки фильтра SVG в начало списка правил перекрестного браузера устраняет ошибку. ПРИМЕЧАНИЕ. Это обходное решение, но основная ошибка все еще существует в Chrome/Safari/webkit, но не в других браузерах/наборах во время этого обновления.