blur in raphael

Question

Here you already find a plug in to add blur to raphael elements

I want to cover parts of my raphael svg with a transparent layer that blurs everything behind it. Is something like this possible with raphael?

Answer 1

No such thing exists in SVG (much less VML), sorry.

The only work around that occurs to me would be to loop through all your elements and apply the blur, fortunately it's only a couple of lines of javascript:

paper.forEach(function(el){
  el.blur();
});

http://jsfiddle.net/MS2AB/

You could also mix in some old fashioned dom manipulation: clone the stage various times in slightly offset positions, and apply a very low opacity to imitate a blur effect, for example...

  var paperhtml = document.getElementById('stage').innerHTML;
  var blurString = "";
  for (x=1; x<=10; x++) {
    for (y=1; y<=10; y++) {
      blurString += "<div style='left: "+(x-5)+"px; top: "+(y-5)+"px; opacity: 0.03'>"+paperhtml+"</div>"
  }
}    
blurcontainer.innerHTML = blurString;

You can view a demo here: http://jsfiddle.net/WTCXF/