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

Я использовал эту маску 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, но не в других браузерах/наборах во время этого обновления.

Ответы

Ответ 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 */
}

Ответ 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;
        }
    }

Ответ 3

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

Небезопасная попытка загрузить URL-данные: image/svg + xml; utf8...

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

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