Question

我正在尝试使用CSS中的数据URI添加SVG过滤器，但无法将效果应用于我的图像。

似乎应该支持它，因为根据“caniuse”，所有主要浏览器都支持数据URI和SVG过滤器。如果我将其保存为SVG文件并链接到css中的文件，则过滤器工作正常。

我已尝试将SVG编码为base64，并对文件进行url编码，但无济于事。

以下是此类滤镜的示例，使滤镜应用的图像为黑白色。

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="light">
        <feColorMatrix type="matrix" result="grayscale--light"
            values="1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0">
        </feColorMatrix>
    </filter>
</svg>

在对SVG进行编码后，我创建了一个具有以下样式的类

.grayscale--light {
    filter: url("data:image/svg+xml;base64,base64encodedString")
}

在我的HTML中

<img src="/path/to/my/image.jpg" class="grayscale--light">

我做了一些可怕的错误或不再支持了吗？我在这个主题上找到的所有文章都是从2014年左右开始的。

Answer 1

首先，您必须在数据URI的末尾引用filter ID，如下所示：...VyPg0KPC9zdmc+#filterID)。现在它适用于Firefox，但不适用于Chrome，它会引发错误：

Unsafe attempt to load URL (...) from frame with URL <URL>. Domains, protocols and ports must match.

因此，Chrome不喜欢数据URI，并希望使用与当前网站匹配的域名的正确网址。有一种方法可以做到：不是对SVG进行数据URI编码，而是将其放在Blob中，并在JavaScript中为其生成URL：

const svg = '<svg xmlns="http://www.w3.org/2000/svg"><filter id="filterID"> ... </svg>',
      blob = new Blob([svg], { type: 'image/svg+xml' }),
      url = URL.createObjectURL(blob);

myImage.style.filter = `url('${url}#filterID')`;

https://jsfiddle.net/57dyw33m/7/

将SVG过滤器内联为数据URI

1 个答案: