Tôi làm cách nào để thêm bộ lọc vào đối tượng SVG trong JavaScript?

Question

Tôi đang cố tạo và thêm bộ lọc feGaussianBlur vào hình chữ nhật SVG bằng JavaScript, sử dụng this code làm tham chiếu. Tôi nhận được một hình chữ nhật, nhưng nó không được lọc. Tôi đang làm gì sai?

tôi đang cố gắng như thế này:

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

Đoạn mã trên làm việc cho tôi bây giờ! Người ta chỉ có thể sử dụng các phương pháp createElementNS, setAttribute và appendChild.

Answer 2

Nếu bạn thích mã dễ đọc hơn - như tôi làm - svg.js hiện có svg filter plugin. mã ví dụ của bạn sẽ giảm xuống còn:

var draw = SVG('canvas') 

draw.rect(90,90) 

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

Nó có lẽ là một năm quá muộn nhưng vẫn đáng nói :)