У меня есть этот файл 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 также работает с компонентами. У меня так было и раньше, но тогда он будет работать только в '/' или корневом каталоге, потому что он будет указывать на: filter: url (/ # white-glow); но на любом другом маршруте (/ about, / contact и т. д.) это не сработает, потому что все равно будет указывать на корень. Если в инспекторе указать / about # white-glow, это снова исправит, но тогда для каждого маршрута потребуется собственное объявление фильтра. Казалось, что иметь его как статический актив имеет смысл, поскольку этот актив будет содержаться в CSS. Но это работает только в Firefox.
Если фильтр является встроенным, вы должны ссылаться на него как на url(#white-glow), без какого-либо маршрута к серверу. Откуда взялась эта черточка?
Я добавил предыдущее тире, потому что иначе это не сработало бы. Не знаю почему.
«Это не сработает» - не очень полезное описание. Ваша установка проходит через три совершенно разных уровня исполнения: во-первых, компиляция с помощью веб-пакета, во-вторых, создание веб-страницы с помощью Vue и, в-третьих, рендеринг браузером. Для третьего этапа ваша страница должна иметь этот фильтр как встроенный элемент <svg> и ссылку на содержащийся в нем идентификатор элемента <filter> без какого-либо предшествующего дефиса. Где в процессе что-то идет не так?






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