zoukankan      html  css  js  c++  java
  • 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>

    刷新页面,问题解决。

  • 相关阅读:
    apns libcurl
    apns libcurl
    epoll
    epoll
    Linux服务器压测
    Linux服务器压测
    libevent
    libevent
    shell脚本
    shell脚本
  • 原文地址:https://www.cnblogs.com/Fred_Xu/p/svg-blur-filter-css-on-firefox.html
Copyright © 2011-2022 走看看