Как заставить SVG-фильтр с кодировкой base64 работать в других браузерах, кроме Firefox?

У меня есть этот файл SVG с фильтром, который я нашел в другом месте на Stack Overflow. Выглядит это так:

<svg xmlns = "http://www.w3.org/2000/svg">
<defs>
<filter id = "white-glow" x = "-5000%" y = "-5000%" width = "10000%" height = "10000%">
<feFlood result = "flood" flood-color = "#ffaaa0" flood-opacity = "1"></feFlood>
<feComposite in = "flood" result = "mask" in2 = "SourceGraphic" operator = "in"></feComposite>
<feMorphology in = "mask" result = "dilated" operator = "dilate" radius = "2"></feMorphology>
<feGaussianBlur in = "dilated" result = "blurred" stdDeviation = "5"></feGaussianBlur>
<feMerge>
<feMergeNode in = "blurred"></feMergeNode>
<feMergeNode in = "SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
</svg>

CSS-загрузчик (я использую настройку Vue / Webpack) преобразует его в строку base64, которая выглядит так:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPGRlZnM+DQo8ZmlsdGVyIGlkPSJ3aGl0ZS1nbG93IiB4PSItNTAwMCUiIHk9Ii01MDAwJSIgd2lkdGg9IjEwMDAwJSIgaGVpZ2h0PSIxMDAwMCUiPg0KPGZlRmxvb2QgcmVzdWx0PSJmbG9vZCIgZmxvb2QtY29sb3I9IiNmZmFhYTAiIGZsb29kLW9wYWNpdHk9IjEiPjwvZmVGbG9vZD4NCjxmZUNvbXBvc2l0ZSBpbj0iZmxvb2QiIHJlc3VsdD0ibWFzayIgaW4yPSJTb3VyY2VHcmFwaGljIiBvcGVyYXRvcj0iaW4iPjwvZmVDb21wb3NpdGU+DQo8ZmVNb3JwaG9sb2d5IGluPSJtYXNrIiByZXN1bHQ9ImRpbGF0ZWQiIG9wZXJhdG9yPSJkaWxhdGUiIHJhZGl1cz0iMiI+PC9mZU1vcnBob2xvZ3k+DQo8ZmVHYXVzc2lhbkJsdXIgaW49ImRpbGF0ZWQiIHJlc3VsdD0iYmx1cnJlZCIgc3RkRGV2aWF0aW9uPSI1Ij48L2ZlR2F1c3NpYW5CbHVyPg0KPGZlTWVyZ2U+DQo8ZmVNZXJnZU5vZGUgaW49ImJsdXJyZWQiPjwvZmVNZXJnZU5vZGU+DQo8ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVNZXJnZU5vZGU+DQo8L2ZlTWVyZ2U+DQo8L2ZpbHRlcj4NCjwvZGVmcz4NCjwvc3ZnPg==

Я объявил это в моем CSS с областью видимости следующим образом:

filter: url(../assets/filters.svg#white-glow);

Который при сборке CSS-загрузчик превращается в такой:

filter: url(data:image/svg+xml;base64...#white-glow);

Это работает в Firefox 47, но не в Chrome 70 или Opera 56.

Как мне решить эту проблему?

Ваше здоровье!

Я не знаком с терминологией Vue, но вы должны стремиться разместить фильтр на странице. В React я бы сказал, сделайте это компонентом.

ccprog 05.12.2018 18:04

Vue также работает с компонентами. У меня так было и раньше, но тогда он будет работать только в '/' или корневом каталоге, потому что он будет указывать на: filter: url (/ # white-glow); но на любом другом маршруте (/ about, / contact и т. д.) это не сработает, потому что все равно будет указывать на корень. Если в инспекторе указать / about # white-glow, это снова исправит, но тогда для каждого маршрута потребуется собственное объявление фильтра. Казалось, что иметь его как статический актив имеет смысл, поскольку этот актив будет содержаться в CSS. Но это работает только в Firefox.

user1895910 05.12.2018 19:00

Если фильтр является встроенным, вы должны ссылаться на него как на url(#white-glow), без какого-либо маршрута к серверу. Откуда взялась эта черточка?

ccprog 05.12.2018 19:04

Я добавил предыдущее тире, потому что иначе это не сработало бы. Не знаю почему.

user1895910 12.12.2018 20:09

«Это не сработает» - не очень полезное описание. Ваша установка проходит через три совершенно разных уровня исполнения: во-первых, компиляция с помощью веб-пакета, во-вторых, создание веб-страницы с помощью Vue и, в-третьих, рендеринг браузером. Для третьего этапа ваша страница должна иметь этот фильтр как встроенный элемент <svg> и ссылку на содержащийся в нем идентификатор элемента <filter> без какого-либо предшествующего дефиса. Где в процессе что-то идет не так?

ccprog 12.12.2018 20:32
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
5
142
0

Другие вопросы по теме