CSS中以Data URI内联SVG滤镜无法生效的技术求助

我之前也碰到过一模一样的坑——明明caniuse显示主流浏览器都支持Data URI和SVG滤镜，单独用SVG文件链接滤镜完全正常，转成Data URI就彻底没效果，折腾了好一阵才摸清楚问题出在哪，大概率是这几个细节没处理到位：

最容易忽略的关键点：不要漏掉滤镜锚点 #

单独用SVG文件时，你会写filter: url('sepia.svg#sepia-filter')，这里的#sepia-filter是直接指向SVG里的具体滤镜元素。但转成Data URI时，很多人只把SVG内容转成编码，却忘了在Data URI末尾加上这个锚点！这是导致滤镜失效的头号原因。

确保SVG基础结构正确 #

你的SVG滤镜必须包含xmlns命名空间，否则浏览器根本无法正确解析SVG内容，滤镜自然不生效。正确的基础结构应该是这样的：

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="your-filter-id">
    <!-- 这里放你的滤镜逻辑，比如色调矩阵、高斯模糊等 -->
    <feColorMatrix type="matrix" values="0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0" />
  </filter>
</svg>

两种正确的Data URI写法示例 #

1. URL编码方式 #

把SVG内容做URL编码（要转义<、>、"这些特殊字符），然后在末尾加上#your-filter-id，CSS写法如下：

.filtered-image {
  filter: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22sepia-filter%22%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220.393%200.769%200.189%200%200%200.349%200.686%200.168%200%200%200.272%200.534%200.131%200%200%200%200%200%201%200%22%20%2F%3E%3C%2Ffilter%3E%3C%2Fsvg%23sepia-filter');
}

2. Base64编码方式 #

如果觉得URL编码太繁琐，可以把SVG内容转成Base64编码，同样要在末尾加上锚点：

.filtered-image {
  filter: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9InNlcGlhLWZpbHRlciI+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAuMzkzIDAuNzY5IDAuMTg5IDAgMCAwLjM0OSAwLjY4NiAwLjE2OCAwIDAgMC4yNzIgMC41MzQgMC4xMzEgMCAwIDAgMCAwIDEgMCIgLz48L2ZpbHRlcj48L3N2Zz4=#sepia-filter');
}

快速排查验证方法 #

如果按上面的写法还是没效果，可以试试这两步：

• 把Data URI复制到浏览器地址栏，看看能不能正常加载SVG（虽然看不到可视化效果，但浏览器不会报错，还能查看源码确认滤镜id是否存在）；
• 打开浏览器控制台，检查有没有“无效滤镜”或者“资源加载失败”的报错，这些信息能帮你快速定位问题。

内容的提问来源于stack exchange，提问作者Klam Huggeren