html – SVG过滤器仅在样式属性(Firefox)中添加时才能工作

发布时间：2020-12-14 21:35:25 所属栏目：资源来源：网络整理

导读：我添加了一个模糊效果svg到我的HTML(text / html)： html head.../head body ... svg xmlns="http://www.w3.org/2000/svg" height="0" filter height="116%" width="116%" y="-8%" x="-8%" id="svgBlur" feGaussianBlur stdDeviation="8" in="SourceGraphic"

我添加了一个模糊效果svg到我的HTML(text / html)：

<html>
    <head>...</head>
    <body>
        ...
        <svg xmlns="http://www.w3.org/2000/svg" height="0">
            <filter height="116%" width="116%" y="-8%" x="-8%" id="svgBlur">
                 <feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
            </filter>
        </svg>
    </body>
</html>

我在CSS表中引用了

#page-container {
    filter: url("#svgBlur");
    -webkit-filter: blur(8px);
}

这样做会使#page-container显示为白色(FF不识别SVG过滤器)。

时髦的部分：

当我禁用Firebug中的上述过滤器规则并在#page-container的style属性中读取它时，它的作用就像一个魅力。

<div id="page-container" style="filter: url("#svgBlur");">

我监督什么？

响应标题：

Cache-Control   no-cache,must-revalidate,post-check=0,pre-check=0
Connection  Keep-Alive
Content-Encoding    gzip
Content-Language    nl
Content-Length  6098
Content-Type    text/html; charset=utf-8
Date    Mon,02 Dec 2013 14:47:01 GMT
Etag    "1385995621"
Expires Sun,19 Nov 1978 05:00:00 GMT
Keep-Alive  timeout=15,max=100
Last-Modified   Mon,02 Dec 2013 14:47:01 +0000
Link    </nl/node/215271>; rel="canonical",</nl/node/215271>; rel="shortlink"
Server  Apache/2.2.3 (Red Hat)
Vary    Accept-Encoding
X-Powered-By    PHP/5.3.19

Firefox 25 OSX上的问题。 Webkit浏览器工作正常，因为它们使用css模糊滤镜

解决方法

#svgBlur是一个相对URL。它被转换为绝对URL，前面加上文件的名称

filter: url("#svgBlur");

在你的情况下，真的只是一个速记

filter: url("stylesheet.css#svgBlur");

哪个不指向任何东西

您需要将html文件的名称放在URL中

filter: url("yourhtmlfile.html#svgBlur");

将工作。这就是为什么当它在html文件中时，它的工作原理是在这种情况下，前缀文件名指向正确的地方。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!