我遇到的问题是在打印页面上正确地将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
解决方法
事实证明,这似乎是FireFox中的浏览器错误.我注意到,任何时候(在屏幕上)当引用浏览器无法找到的svg时,我会得到与打印时完全相同的问题：图像布局将被保留,但它将是空白区域.这让我想知道在渲染打印机而不是屏幕时是否可以加载/找到的内容有所不同,所以我开始尝试不同的加载/引用svg的方法.我尝试从单独的文件,html中的id和内联中加载svg,所有这些都与在单独的css文件,页内类和内联样式中定义过滤器相结合.在所有组合中,这是有效的：
Define the svg in html,and reference it using inline styles or in-page css classes.
我知道这听起来很奇怪,但实际上我试过的其他所有内容都会中断,包括在外部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中获得的那种东西…希望有助于拯救某人一些时间/悲伤/杀人的想法
