Reputation: 1097
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);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="lightGradient" gradientTransform="rotate(-5)">
<stop stop-color="white" stop-opacity="0.4" offset="0%"/>
<stop stop-color="white" stop-opacity="0.5" offset="5%"/>
<stop stop-color="black" stop-opacity="0.2" offset="6%"/>
<stop stop-color="black" stop-opacity="0.3" offset="19%"/>
<stop stop-color="black" stop-opacity="0.2" offset="12%"/>
<stop stop-color="white" stop-opacity="0.8" offset="13%"/>
<stop stop-color="white" stop-opacity="0.9" offset="15%"/>
<stop stop-color="white" stop-opacity="0" offset="15%"/>
<stop stop-color="white" stop-opacity="0" offset="16%"/>
<stop stop-color="white" stop-opacity="0.8" offset="16%"/>
<stop stop-color="white" stop-opacity="0.9" offset="18%"/>
<stop stop-color="white" stop-opacity="0" offset="18%"/>
<stop stop-color="white" stop-opacity="0" offset="20%"/>
<stop stop-color="white" stop-opacity="1" offset="20%"/>
<stop stop-color="white" stop-opacity="1" offset="25%"/>
</linearGradient>
<rect id="recGradient" x="0" y="0" width="100%" height="100%" fill="url(#lightGradient)"/>
<filter id="filter" primitiveUnits="objectBoundingBox">
<feImage x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="#recGradient"/>
<feComposite operator="in" in="SourceGraphic"/>
</filter>
</defs>
</svg>
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.
Upvotes: 2
Views: 4019
Reputation: 31805
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);
}
<svg>
<defs>
<filter id="myGradient" primitiveUnits="objectBoundingBox">
<feImage x="0%" y="0%" width="100%" height="100%" preserveAspectRatio="none" xlink:href="data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22200px%22%20height%3D%22200px%22%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'lightGradient'%20gradientTransform%3D'rotate(-5)'%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.4'%20offset%3D'0%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.5'%20offset%3D'5%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.2'%20offset%3D'6%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.3'%20offset%3D'19%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.2'%20offset%3D'12%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.8'%20offset%3D'13%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.9'%20offset%3D'15%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'15%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'16%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.8'%20offset%3D'16%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.9'%20offset%3D'18%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'18%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'20%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'1'%20offset%3D'20%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'1'%20offset%3D'25%25'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%0A%20%20%3Crect%20id%3D'recGradient'%20x%3D'0%25'%20y%3D'0%25'%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23lightGradient)'%2F%3E%3C%2Fsvg%3E"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
</svg>
<div>
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
</div>
Upvotes: 4