This demonstrates applying a filter to HTML content using SVG. It establishes several filters, which are applied with CSS to three elements in both the normal and mouse hover states.
<p class="target" style="background: lime;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<pre class="target">lorem</pre>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
<em class="target"
>elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</em
>
Ut enim ad minim veniam.
</p>
Any SVG filter can be applied this way. For example, to apply a blur effect, you might use:
<svg height="0">
<filter id="f1">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
You could also apply a color matrix:
<svg height="0">
<filter id="f2">
<feColorMatrix
values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>
</svg>
And some more filters:
<svg height="0">
<filter id="f3">
<feConvolveMatrix
filterRes="100 100"
style="color-interpolation-filters:sRGB"
order="3"
kernelMatrix="0 -1 0 -1 4 -1 0 -1 0"
preserveAlpha="true" />
</filter>
<filter id="f4">
<feSpecularLighting
surfaceScale="5"
specularConstant="1"
specularExponent="10"
lighting-color="white">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
</filter>
<filter id="f5">
<feColorMatrix
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 1 0 0 0"
style="color-interpolation-filters:sRGB" />
</filter>
</svg>
The five filters are applied using the following CSS:
p.target {
filter: url(#f3);
}
p.target:hover {
filter: url(#f5);
}
em.target {
filter: url(#f1);
}
em.target:hover {
filter: url(#f4);
}
pre.target {
filter: url(#f2);
}
pre.target:hover {
filter: url(#f3);
}