CODEWITHSUNDEEP
htmlwebkitsvg
RandallB
RandallB

Reputation: 5565

SVG filters on HTML in webkit?

So I've been messing around with SVG filters, and I'd like to apply them to HTML content.

http://paulirish.com/work/videooo.xhtml - works in firefox, not chrome. https://dl.dropbox.com/u/4031469/woohtml.html - My example, works in FF, not Chrome.

Around the web, I've seen things mentioning the url() syntax for defining svg-based filters, while custom() refers to css shaders.

However, I haven't been able to get the filter working by either using the filter: property, nor the -webkit-filter: property.

Any ideas on how to get them to work? about:flags in Chrome doesn't have any options, so I'm trying to figure out if they're not implemented yet, or if I'm doing something incorrect.

Upvotes: 3

Views: 2727

Answers (2)

Stephen White
Stephen White

Reputation: 126

In addition to the shorthand filters (blur, sepia, etc), Chrome now supports SVG filters on HTML content, as of V.21, using the -webkit-filter: url(#foo) syntax.

Upvotes: 6

methodofaction
methodofaction

Reputation: 72405

Webkit doesn't support svg filters on html elements. It does, however, support css filters.

So if you want to support both browsers you could write...

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

You can see more CSS filters here: http://davidwalsh.name/css-filters

I haven't tested, but I doubt IE9 and Opera support css or svg filters in their current incarnations (IE9 and Opera 11).

Upvotes: 1

Related Questions