HTML CSS examples for SVG:Effect
SVG blur effect
<html> <head></head> <body> <svg width="0" height="0"> <defs> <filter id="blur_inline"> <fegaussianblur in="SourceGraphic" stdDeviation="3" /> </filter> <symbol id="filtered" width="80mm" height="50mm" viewbox="0 0 80 50" preserveaspectratio="xMinYMin meet"> <rect id="a" x="0" y="10" width="30" height="20" fill="green" /> <rect id="e" x="40" y="10" width="30" height="20" fill="blue" filter="url(#blur_inline)" /> </symbol> <symbol id="no_filter" width="80mm" height="50mm" viewbox="0 0 80 50" preserveaspectratio="xMinYMin meet"> <rect id="a" x="0" y="10" width="30" height="20" fill="green" /> <rect id="e" x="40" y="10" width="30" height="20" fill="blue" /> </symbol> </defs> </svg> <!-- w w w . j a v a2 s.c o m--> <p>Symbol with a green and blurred blue box:</p> <svg width="100mm" height="50mm"> <use xlink:href="#filtered" x="10" y="35"></use> </svg> <p>Second symbol with no filter applied:</p> <svg width="100mm" height="50mm"> <use xlink:href="#no_filter" x="10" y="35"></use> </svg> </body> </html>