html - 内联 SVG 过滤器作为数据 URI

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 中不工作，它会抛出错误:

旧 Chrome 版本可能会抛出错误(感谢@Daniel Weiner):

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

因此 Chrome 不喜欢数据 URI，并且想要一个具有与当前站点匹配的域的正确 URL。有一种方法可以做到这一点:不是对 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/5ec0z2rq/