SVG过滤webkit中的HTML？

Question

所以我一直在搞乱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没有任何选项，所以我想弄清楚它们是否尚未实现，或者我做错了什么。

Answer 1

除了速记过滤器（模糊，棕褐色等）之外，Chrome现在支持HTML内容的SVG过滤器，自V.21起，使用-webkit-filter：url（#foo）语法。

Answer 2

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

因此，如果你想支持这两种浏览器，你可以写...

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

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

我没有测试过，但我怀疑IE9和Opera支持当前版本的IE或svg过滤器（IE9和Opera 11）。