Blur - SVG blur filter applied to a SVG element

SVG blur filter applied to a SVG element

HTML

<!--[if lt IE 7]> <div class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <div class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <div class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <div class="no-js"> <!--<![endif]-->

    <svg id="svg-el-blur">
        <text x="0" y="50">
            SVG Blur
        </text>
    </svg>

</div>

<svg id="svg-effects">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="0.9" />
    </filter>

    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

CSS

#svg-el-blur { height: 60px; width: 100%; }
    #svg-el-blur text { fill: green; filter:url(#blur-effect-1); font: 50px sans-serif; }
    #svg-el-blur text:hover { filter:url(#blur-effect-2); }

.lt-ie9 #svg-el-blur text { display:block;width:200px;height:200px;background:url('http://media.npr.org/assets/img/2013/05/02/mars-nasa_custom-745ff15ed1a80d8cbb47a4cb44186c5b6bea41e3-s6-c30.jpg');color: #eee; }