Css Chrome中页面SVG中的引用_Css_Html_Svg

Css Chrome中页面SVG中的引用

css html svg

Css Chrome中页面SVG中的引用,css,html,svg,Css,Html,Svg,对某人来说是个有趣的问题。我尝试使用以下标记将SVG过滤器应用于页面中加载的图像： <!DOCTYPE html> <html> <head> <title>Example</title> <style type="text/css"> #exampleImage { filter: url("#grayscale"); } </style> </head> <bo

对某人来说是个有趣的问题。我尝试使用以下标记将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>


例子
#示例图像{
过滤器：url（“灰度”）；
}

这在Firefox中效果很好-图像显示为灰度-但在webkit（Mac上的Chrome或Safari）中效果不佳。从我读到的来看，这应该行得通。你能看到我遗漏了什么吗

谢谢

不管怎样，事实证明filter:url（）语法对webkit并不友好，尽管我在其他地方读过

相反，对于此特定场景，您需要使用CSS规则：

-webkit过滤器：灰度（100%）

以下是您的示例，它适用于所有支持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>


例子
#示例图像{
过滤器：url（“灰度”）；
}

Safari在版本6中开始支持过滤器，有关所有浏览器，请参阅