3

所以我一直在搞乱 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:属性来使过滤器正常工作。

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

4

2 回答 2

6

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

于 2013-01-11T22:37:39.100 回答
1

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 过滤器。

于 2012-06-28T18:55:08.330 回答