2012-01-10 109 views
0

Here你已經找到一個插件添加模糊拉斐爾元素模糊在拉斐爾

我要蓋與模糊其背後一切透明層我拉斐爾SVG的部分。像raphael這樣可能嗎?

回答

5

沒有這樣的事情存在於SVG(更少VML),對不起。

唯一的解決辦法是發生在我會遍歷所有元素,並應用模糊,好在這只是一對夫婦行JavaScript代碼的:

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

http://jsfiddle.net/MS2AB/

你也可以混合在一些老式的dom操縱:在稍微偏移的位置克隆舞臺不同的時間,並應用非常低的不透明度來模仿模糊效果,例如...

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; 

你可以在這裏查看演示: http://jsfiddle.net/WTCXF/

+0

不幸的是,我不能使用所有拉斐爾元素的模糊。我需要一個模糊的區域 - 可以說我的raphael-svg的低50% - 完全覆蓋。而且這個區域也只覆蓋了我的部分元素,取決於它們的位置。就像「50%的raphael-svg覆蓋在模糊的背後」 – zbug 2012-01-12 09:15:49

+0

我想到了一種解決方法,答案已更新。 – Duopixel 2012-01-12 10:24:05

+0

這是一個很好的解決方案,如果背景是固定的。感謝您的意見 – zbug 2012-01-13 16:31:59