How to apply gradient using svg filter

Question

I want to create a filter that when applied to an html element, would apply a gradient to the entire element. The css gradient only applies to the background, so it is not what I want. What I want is say my element contains a triangle and a circle, I want to apply a filter to my element and the triangle and the circle would have a gradient applied to them.

This is what I've got so far:

.my-element{
    filter: url(svg.svg#filter);
}

Edit: with the above code the element just becomes invisible in Firefox, in chrome it seems to work.

so, obviously I'm doing it wrong. I have no idea how to create svg filters, so any help would be appreciated.

Michael Mullany · Accepted Answer

This is how you construct a cross-browser filter that does what you want here. The sizings are tricky because you're defining a rect with an applied gradient within a DataURI, then pulling that into a filter using an feImage and then applying that to HTML content using the SVG filter trapdoor in CSS filters. But it does work.

(BTW - it's not clear whether you want to retain the color of the original text and just apply a opacity gradient, or whether you want the black/white gradient to over-ride the original color. You can toggle this by changing the "in2" to "in" in the feComposite. This governs whether you're applying the opacity of the sourcegraphic to the gradient or vice versa.)

div {
  filter: url(#myGradient);
}







  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text   Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text

How to apply gradient using svg filter

Answers (1)

Related Questions