对某人来说很有趣的问题。我正在尝试使用以下标记将 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）中则不然。从我读过的内容来看，这应该有效。你能看到我缺少的东西吗？
Thanks!
这是您以适用于所有支持 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 中开始支持过滤器，请参阅支持表 http://caniuse.com/#feat=svg-filters适用于所有浏览器。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
