¿Cómo puedo agregar un filtro a un objeto SVG en JavaScript?

Question

Estoy tratando de crear y agregar un filtro feGaussianBlur a un rectángulo SVG usando JavaScript, usando this code como referencia. Obtengo un rectángulo, pero no está filtrado. ¿Qué estoy haciendo mal?

Estoy tratando de esta manera:

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

El código anterior funciona para mí ahora! Uno puede simplemente usar los métodos createElementNS, setAttribute y appendChild.

Answer 2

Si prefiere un código más legible, como yo, - svg.js ahora tiene un svg filter plugin. El código de ejemplo podría reducirse a:

var draw = SVG('canvas') 

draw.rect(90,90) 

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

Es probablemente un año demasiado tarde, pero todavía vale la pena mencionar :)