0

对某人来说很有趣的问题。我正在尝试使用以下标记将 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）中不行。从我一直在阅读的内容来看，这应该有效。你能看出我遗漏了什么吗？

谢谢！

  • 本
4

2 回答 2

2

这是您以适用于所有支持 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 中开始支持过滤器，请参阅对所有浏览器的支持表。

于 2012-12-04T11:01:21.733 回答
0

没关系，过滤器：url() 语法对 webkit 不友好，尽管我在其他地方读过。

相反，对于这种特殊情况，您需要使用 CSS 规则：

-webkit-filter：灰度（100%）；

于 2012-12-04T02:34:39.143 回答