如何在JavaScript中爲SVG對象添加過濾器？

我正在嘗試使用JavaScript創建並添加feGaussianBlur過濾器到SVG矩形，使用this code作爲參考。我得到一個矩形，但它沒有被過濾。我究竟做錯了什麼？如何在JavaScript中爲SVG對象添加過濾器？

我想是這樣的：

var container = document.getElementById("svgContainer"); 
var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
mySvg.setAttribute("version", "1.1"); 
container.appendChild(mySvg); 

var obj = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
obj.setAttribute("width", "90"); 
obj.setAttribute("height", "90"); 

var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); 

var filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); 
filter.setAttribute("id","f1"); 
filter.setAttribute("x","0"); 
filter.setAttribute("y","0"); 

var gaussianFilter = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); 
gaussianFilter.setAttribute("in","SourceGraphic"); 
gaussianFilter.setAttribute("stdDeviation","15"); 

filter.appendChild(gaussianFilter); 
defs.appendChild(filter); 
mySvg.appendChild(defs);  
obj.setAttribute("filter","url(#f1)"); 

mySvg.appendChild(obj);

來源

2012-06-03 stonecup64

[你嘗試過什麼？]（http://whathaveyoutried.com/）堆棧溢出不是你的個人研究助理]（http://meta.stackexchange.com/a/128553/186879）。如果您在解決您的問題（例如發佈一些代碼）方面表現出一些努力，而不是尋求一個完整的示例/研究，我們將更傾向於幫助您。 –

我已經刪除了_EDIT：無所謂，現在它適用於我_！從問題中選擇，因爲在答案框中添加實際解決方案要好得多。我傾向於認爲這是提問的價格，即使你自己設法解決它：：）'。 – halfer

上面的代碼，現在對我的作品！可以簡單地使用createElementNS，setAttribute和appendChild方法。

來源

2012-06-03 11:37:58 stonecup64

感謝您回覆答案 –

如果你喜歡更可讀的代碼 - 像我一樣 - svg.js現在有一個svg filter plugin。你的示例代碼將簡化爲：

var draw = SVG('canvas') 

draw.rect(90,90) 

rect.filter(function(add) { 
    add.gaussianBlur('15') 
})

這可能是一年爲時已晚，但仍然值得一提的:)

來源

2013-07-27 13:20:39 wout

如何在JavaScript中爲SVG對象添加過濾器？

回答

相關問題