SVG blur filter test

by Yury

HTML

<!--[if lte IE 9 ]> <body class="lte-ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE) ]> <body class="not-ie" lang="en"> <![endif]-->
<div class="table">
    <div class="table-cell">
        <svg id="svg-image-blur" 
xml:space="preserve" 
preserveAspectRatio="xMinYMin meet"
width="300"
height="200"

        >
    <image x="0" y="0" id="svg-image" width="100%" height="100%"  xlink:href="http://f6.s.qip.ru/7WXfIQqP.png" />

    <filter id="blur-effect-1">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
</svg> 
    </div>
</div>

CSS

#svg-image-blur {/* height: 220px; width: 320px;*/
/*    filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=5);*/
}
.lte-ie9 #svg-image-blur:hover {
    filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);
    top: -3px;
    left: -3px;
    position: relative;
}

#svg-image {
/*        filter:url(#blur-effect-1);*/
}
#svg-image:hover {
        filter:url(#blur-effect-1);
}
.table {
    width: 320px;
    height: 250px;
    display: table;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid gray;
}