У меня есть этот 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или Опера 56.
Как мне решить эту проблему?
Ура!