Jak mogę dodać filtr do obiektu SVG w JavaScript?

Question

Próbuję utworzyć i dodać filtr feGaussianBlur do prostokąta SVG przy użyciu JavaScript, używając jako odniesienia wartości this code. Dostaję prostokąt, ale nie jest filtrowany. Co ja robię źle?

Próbuję tak:

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

Powyższy kod działa dla mnie teraz! Można po prostu użyć metod: createElementNS i .

Answer 2

Jeśli wolisz bardziej czytelny kod - tak jak ja - svg.js ma teraz svg filter plugin. Twój przykład kod będzie zmniejszona do:

var draw = SVG('canvas') 

draw.rect(90,90) 

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

Prawdopodobnie jest to lata za późno, ale nadal warto wspomnieć :)