Question

我使用了以下SO答案......

https://stackoverflow.com/a/8612047/80969

..实施去饱和拇指，在悬停它们时，移除过滤器并且拇指显示颜色。我已经把它用于我的开发环境了。现在我已经在生产中使用了该功能，它在Firefox（10）中不起作用：

http://www.jungledragon.com/video/2

请注意，视频旁边有多个拇指，但只有一个可见，另一个只在悬停后出现。它当然应该始终可见，但在不活跃时会去饱和。

在我寻找我的开发和生产设置之间的区别时，我已经读过请求SVG文件（用于过滤器）必须发生在与请求它的页面相同的域中。

在制作中我的一般域名是www.jungledragon.com

包含对过滤器的引用的CSS文件托管在单独的子域：static.jungledragon.com。从这个CSS文件中，引用filters.svg，它位于static.jungledragon.com的同一目录中。

我认为既然CSS和SVG文件都在同一个域和目录中，那么应该没有问题。然后我考虑可能请求页面（不是CSS，但HTML文件）应该与SVG文件在同一个域中。因此，我将CSS文件中的引用调整为硬编码的www.jungledragon.com。这也无济于事。

为什么Firefox没有正确获取SVG参考？

Answer 1

根据this answer，svg过滤器仅适用于xhtml文档，所以我猜你的本地网络服务器正在这样做，但你的公共网络服务器却没有。

添加包含以下内容的.htaccess文件：

RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]

此外，您的svg文件引用缺少http://

section.videopanel .videos li img {
    -moz-transition: all 0.5s ease 0s;
    filter: url("http://www.jungledragon.com/css/filters.svg#grayscale");
}

Firefox没有选择SVG过滤器去饱和图像拇指

1 个答案: