如何使base64编码的SVG过滤器在Firefox以外的其他浏览器中运行?

时间:2018-12-05 00:53:48

标签: css google-chrome firefox svg filter

我有这个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-loader(我正在使用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-loader会变成这样:

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

这在Firefox 47中有效,但在Chrome 70或Opera 56中无效。

我该如何解决?

干杯!

0 个答案:

没有答案