Come posso aggiungere un filtro a un oggetto SVG in JavaScript?

Question

Sto cercando di creare e aggiungere un filtro feGaussianBlur a un rettangolo SVG utilizzando JavaScript, utilizzando this code come riferimento. Ottengo un rettangolo, ma non è filtrato. Che cosa sto facendo di sbagliato?

sto provando in questo modo:

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); 

Answer 1

Il codice precedente funziona per me ora! Si può semplicemente usare i metodi createElementNS, setAttribute e appendChild.

Answer 2

Se si preferisce codice più leggibile - come faccio io - svg.js ora ha un svg filter plugin. Il tuo codice di esempio sarebbe ridotto a:

var draw = SVG('canvas') 

draw.rect(90,90) 

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

E 'probabilmente un anno troppo tardi, ma comunque degno di nota :)