某人的有趣问题。我正在尝试使用以下标记将 SVG 过滤器应用于页面中加载的图像:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
#exampleImage {
filter: url("#grayscale");
}
</style>
</head>
<body>
<img id="exampleImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/300px-Bitmap_VS_SVG.svg.png" />
<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>
</body>
</html>
这在 Firefox 中运行良好 - 图像显示为灰度 - 但在 webkit(Mac 上的 Chrome 或 Safari)中则不然。从我一直在阅读的内容来看,这应该有效。你能看到我遗漏的任何东西吗?
谢谢!
- 本
最佳答案
这是您以一种在所有支持 svg 过滤器的浏览器中工作的方式制作的示例:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
#exampleImage {
filter: url("#grayscale");
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale" x="0" y="0" width="1" height="1">
<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>
<image id="exampleImage" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/300px-Bitmap_VS_SVG.svg.png" width="100%" height="100%"/>
</svg>
</body>
</html>
Safari 在版本 6 中开始支持过滤器,请参阅 table of support适用于所有浏览器。
关于css - 在 Chrome 中引用页内 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13695176/