Firefox使用svg blur滤镜渲染图片

很久没来更新博客了，今天正好比较闲，就写一篇手头项目上遇到的一个css问题：

.mature .blur {
    -webkit-filter:blur(25px);
    -moz-filter:blur(25px);
    filter: url(data:image/svg+xml;base64,77u/PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImJsdXIiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjI1IiAvPjwvZmlsdGVyPjwvc3ZnPg==#blur);
    filter: blur(25px);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='25');
    transition: 1s filter linear;
}

Firefox可以使用filter+svg实现blur效果，url参数中原本使用的是svg路径#blur，svg、css、js都在CDN中，但发现这个svg在FF中不工作，图片显示为纯黑色，ORZ...于是想到了用base64来转码这个svg文件：

<svg>
    <filter id="blur">
        <feGaussianBlur stdDeviation="25" />
    </filter>
</svg>

在线转码：http://b64.io/

转好后还是老问题，有点莫名，g了下发现，svg tag需要增加文档类型：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
        <feGaussianBlur stdDeviation="25" />
    </filter>
</svg>

刷新页面，问题解决。

转载于:https://www.cnblogs.com/Fred_Xu/p/svg-blur-filter-css-on-firefox.html