Question

我遇到了一个问题，即在打印页面上正确地将Firefox的过滤器css属性设置为灰度。出于某种原因，灰度图像在打印输出上不可见，尽管它在屏幕上显示为预期的。在提到this one之类的问题之后，我已经达到了这一点（简化以证明问题）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .grayscale {
                filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
                filter: grayscale(100%);
            }
            img {
                width:100px;
            }
        </style>
    </head>
    <body>
        <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
    </body>
</html>

这里是fiddle

是否有可行的解决方法，或者我做错了什么？将过滤器应用于其他元素似乎会导致同样的问题。我非常感谢任何建设性的意见。

注意：使用Firefox v20.0.1

Answer 1

事实证明，这似乎是FireFox中的浏览器错误。我注意到，任何时候（在屏幕上）当引用浏览器无法找到的svg时，我会得到与打印时完全相同的问题：图像布局将被保留，但它将是空白区域。这让我想知道在渲染打印机而不是屏幕时是否可以加载/找到的内容有所不同，所以我开始尝试不同的加载/引用svg的方法。我尝试从单独的文件，html中的id和内联中加载svg，所有这些都与在单独的css文件，页内类和内联样式中定义过滤器相结合。在所有组合中，这是有效的：

在html中定义svg，并使用内联样式或页内css类引用它。

我知道这听起来很奇怪，但实际上我试过的其他所有内容都会中断，包括在外部css文件中设置过滤器css属性。进入页内类方法，这是固定的html的样子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .grayscale {
                filter: url(#grayscale); /* Firefox 10+ */
                filter: gray; /* IE6-9 */
                -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
            }
            img {
                width:100px;
            }
        </style>
    </head>
    <body>
        <img class="grayscale" src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <img src="http://alltheragefaces.com/img/faces/png/rage-nuclear.png" />
        <svg xmlns='http://www.w3.org/2000/svg' height="0px">
            <filter id='grayscale'>
                <feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0      0      
                                                     0.3333 0.3333 0.3333 0      0      
                                                     0.3333 0.3333 0.3333 0      0      
                                                     0      0      0      1      0'/>
            </filter>
        </svg>
    </body>
</html>

再次，您可以打印修改后的fiddle，现在可以在Firefox中看到图像。

Siiigh，这是我期望从IE中获得的那种东西...希望有助于拯救某人一些时间/悲伤/杀人的想法

Firefox过滤灰度和打印

1 个答案: