[英]Firefox filter grayscale and printing
我遇到了使Firefox的filter css属性在打印页面上正确灰度化的问题。 由于某种原因,尽管灰度图像在屏幕上按预期显示,但在打印输出上看不到灰度图像。 指的是这样的问题后, 这一次 ,我已经得到了这一点(简体证明这个问题):
<!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>
这是小提琴
有没有可行的解决方法,或者我做错了什么? 将过滤器应用于其他元素似乎会导致相同的问题。 我将不胜感激任何建设性的投入。
注意:使用Firefox v20.0.1
事实证明,这几乎似乎是FireFox中的浏览器错误。 我注意到,任何时候(在屏幕上)当引用svg时浏览器都找不到它,我将得到与打印时完全相同的问题:图像布局将被保留,但将是空白。 这促使我想知道在为打印机而不是屏幕进行渲染时可以加载/找到的内容是否存在差异,因此我开始尝试以不同方式加载/引用svg。 我尝试从单独的文件,shtml和内联的id中加载svg,所有这些都与在单独的css文件,页内类和内联样式中定义过滤器相结合。 在所有组合中,这是有效的:
在html中定义svg,并使用内联样式或页内CSS类对其进行引用。
我知道这听起来很奇怪,但实际上我尝试的所有其他操作都中断了,包括执行相同的操作,但在外部css文件中设置了filter 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>
再次,您可以从中打印修改过的小提琴 ,现在在Firefox中可以很好地看到图像。
Siiigh,这是我希望从IE中获得的东西...希望能帮助某人节省一些时间/悲痛/凶恶的想法
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.