XMLNS W3 для SVG спецификации Теперь бросать ошибку в Chrome

Question

Я использовал эту маску для 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: изображение/SVG + XML, utf8, HTTP: //www.w3.org/2000/svg 'высота =' 0 '> # greyscale from fr ame с URL [мой домен здесь]. Домены, протоколы и порты должны совпадать.

Излишне говорить, что оттенок серого не работает.

1. Не могли бы вы объяснить, что не так?
2. Можно ли это исправить, чтобы использовать тот же код CSS, не возникает ошибка, и фильтр работает?
3. Принимая во внимание тот же домен и протокол, хотя я не знаю, как реализовать решение, поскольку я не понимаю проблему, я могу поместить и связать файлы в том же домене/поддомене с тем же протоколом, вместо этого использования внешнего URL.

UPDATE: @Potherca

Пользователь прокомментировал:

... работал в Chrome 52, сломал в Chrome 53 ...

Это также мое опыт. Маска SVG не работает в текущей версии Chrome (версия Chrome 53.0.2785.116), но она работала в предыдущей версии. Он все еще работает в Firefox и Safari.

UPDATE 2: Я попробовал его с https как ...xmlns='http://www.w3.org/2000/svg'... но ошибка/ошибка сохраняется.

UPDATE 3: Как предположил пользователь @Potherca, перемещая строку фильтра SVG в верхней части списка правил фильтрации кросс-браузер устраняет ошибку. ПРИМЕЧАНИЕ. Это обходное решение, но основная ошибка все еще существует в Chrome/Safari/webkit, но не в других браузерах/наборах на момент обновления.

Answer 1

У меня были подобные проблемы. Для кросс-браузерной поддержки в CSS было добавлено несколько строк filter.

Похоже, что фильтр SVG является последним в строке. Перемещая его перед другими линиями фильтров, Chrome использовал еще один filter, и ошибка исчезла.

.gray-out { 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: gray; 
    filter: url("data:image/svg+xml;utf8,<svg>...</svg>");/* Move this line up */ 
} 

Answer 2

Эта проблема возникла для меня в Chrome версии 59.0.3071.115 (Official Build) (64-разрядная версия)

Он работает после того, как я сделал изменения на основе предыдущего ответа

@media only screen and (min-width: 820px) { 
      .brand-slider img { 
       filter: grayscale(100%); 
       -webkit-filter: grayscale(100%); 
       -moz-filter: grayscale(100%); 
       -ms-filter: grayscale(100%); 
       -o-filter: grayscale(100%); 

       filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); /* Firefox 10+, Firefox on Android */ 

      transition: all 1000ms ease 0s; 
      } 
     } 

Изменен код

@media only screen and (min-width: 820px) { 
     .brand-slider img { 

      filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); /* Firefox 10+, Firefox on Android */ 

      filter: grayscale(100%); 
      -webkit-filter: grayscale(100%); 
      -moz-filter: grayscale(100%); 
      -ms-filter: grayscale(100%); 
      -o-filter: grayscale(100%); 
     transition: all 1000ms ease 0s; 
     } 
    } 

Answer 3

Это может помочь кому-то, кто не использует SVG-фильтр, но по-прежнему получает аналогичное сообщение об ошибке.

небезопасный попытка загрузить URL данные: изображения/SVG + XML; utf8 ...

Я предполагаю, что не менее Chrome и Firefox используют SVG фильтры под капотом, даже если вы определили просто CSS filter правило.

Так что в моем случае проблема была filter в некорректно отформатированном селекторе CSS, который произошел из-за того, что я переключился с вложенности стиля SASS на вложенный CSS-стиль. Спецификация требует, чтобы вы запускали каждый вложенный селектор с помощью &.