webkit中HTML上的SVG过滤器？答案

【问题标题】：SVG filters on HTML in webkit?webkit中HTML上的SVG过滤器？
【发布时间】：2012-06-29 04:40:44
【问题描述】：

所以我一直在搞乱 SVG 过滤器，我想将它们应用于 HTML 内容。

http://paulirish.com/work/videooo.xhtml - 适用于 Firefox，而不是 chrome。 https://dl.dropbox.com/u/4031469/woohtml.html - 我的例子，适用于 FF，而不是 Chrome。

在网络上，我看到一些东西提到了定义基于 svg 的过滤器的 url() 语法，而 custom() 指的是 css 着色器。

但是，我无法通过使用filter: 属性或-webkit-filter: 属性使过滤器正常工作。

关于如何让它们工作的任何想法？ Chrome 中的about:flags 没有任何选项，所以我试图弄清楚它们是否还没有实现，或者我做错了什么。

【问题讨论】：

【解决方案1】：

除了速记过滤器（模糊、深褐色等），Chrome 现在支持 HTML 内容的 SVG 过滤器，从 V.21 开始，使用 -webkit-filter: url(#foo) 语法。

【讨论】：

【解决方案2】：

Webkit 不支持 html 元素上的 svg 过滤器。但是，它确实支持 css 过滤器。

因此，如果您想同时支持这两种浏览器，您可以编写...

selector {
  filter: url(#reference_to_blur);
  -webkit-filter: blur(10px);
}

您可以在此处查看更多 CSS 过滤器：http://davidwalsh.name/css-filters

我还没有测试过，但我怀疑 IE9 和 Opera 在其当前版本（IE9 和 Opera 11）中是否支持 css 或 svg 过滤器。

【讨论】：