gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 12:14:11 25 4
gpt4 key购买 nike

我在我的 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>

我在我的 CSS 表中引用了:

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

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


时髦的部分:

当我在 Firebug 中禁用上述过滤规则并将其重新添加到#page-container 的样式属性中时,它就像一个魅力。

<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 文件中时起作用的原因,因为在这种情况下,前置文件名指向正确的位置。

关于html - SVG 过滤器仅在添加到样式属性时才起作用 (Firefox),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20330149/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com