时间戳

首页 > 解决方案 > 如何让 base64 编码的 SVG 过滤器在 Firefox 以外的其他浏览器中工作？

css - 如何让 base64 编码的 SVG 过滤器在 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-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。

我该如何解决这个问题？

干杯!

标签： cssgoogle-chromefirefoxsvgfilter

解决方案

推荐阅读