SVG过滤器仅在样式属性(Firefox)中添加时才起作用

Question

SVG过滤器仅在样式属性(Firefox)中添加时才起作用

Mar*_*ckx 16 html css firefox svg svg-filters

我在HTML(text/html)中添加了一个模糊效果svg:

<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>

Run Code Online (Sandbox Code Playgroud)

我在CSS表中引用的内容:

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

Run Code Online (Sandbox Code Playgroud)

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

时髦的部分:

当我在Firebug中禁用上面的过滤规则并在#page-container的style属性中读取它时,它就像一个魅力.

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

Run Code Online (Sandbox Code Playgroud)

我在监督什么？

响应标头:

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

Run Code Online (Sandbox Code Playgroud)

Problem on Firefox 25 OSX. Webkit browsers work fine, because they use the css blur filter

Answer 1

Rob*_*son 20

#svgBlur是一个相对URL.它通过在其前面添加文件名来转换为绝对URL

filter: url("#svgBlur");

Run Code Online (Sandbox Code Playgroud)

在你的情况下,这只是一个简写

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

Run Code Online (Sandbox Code Playgroud)

哪个不指向任何东西.

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

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

Run Code Online (Sandbox Code Playgroud)

将工作.这就是为什么它在html文件中工作的原因当然前缀文件名指向正确的位置.

要清楚,如果行`filter:url("#svgBlur");`与svg元素不在同一个文件中,那么你需要将svg/HTML文件的文件名添加到URL中.是这样的吗？ (2认同)
+1 - 如果它可以帮助任何人,`filter:url(".#svgBlur");`在firefox中为我工作. (2认同)

Answer 2

Mar*_*ckx 6

我将svg作为base64字符串直接包含在css文件中.这解决了我的问题.

filter:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0ic3ZnQmx1ciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4=#svgBlur)

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，9 月前
查看次数：	9234 次
最近记录：	8 年，2 月前