A CodePen by Colin Meerveld. blur

index.html

<svg xmlns="http://www.w3.org/2000/svg"
    width="400"
    height="400"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    	<defs> 
            <filter id="blur"> 
                <feGaussianBlur stdDeviation="10 2"/>
            </filter>
        </defs>
   <rect x="10" y="10" 
	      width="100" height="100"
	      rx="15" ry="15"/>
</svg>

script.js

document.addEventListener("keydown", function(e){
    document.getElementsByTagName("svg")[0].classList.toggle("move");
}, false);

style.css

svg {
                  -webkit-transform: translate3D(0, 0, 0);
                -webkit-transition: -webkit-transform 320ms ease-out;
}

svg.move {
  -webkit-transform: translate3d(400px,0px,0);
}

svg rect {
  fill:red;
}

svg.move rect {
  filter:url(#blur);
}