JavaScript'te SVG nesnesine nasıl filtre ekleyebilirim?

Question

oluşturmak ve referans olarak this code kullanarak, JavaScript kullanarak bir SVG dikdörtgen bir feGaussianBlur filtresi eklemek çalışıyorum. Dikdörtgen alıyorum, ancak filtrelenmiyor. Neyi yanlış yapıyorum?

böyle çalışıyorum:

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

yukarıdaki kod artık benim için çalışıyor! Bir sade createElementNS, setAttribute ve appendChild yöntemleri kullanabilirsiniz.

Answer 2

daha okunabilir kod tercih ediyorsanız - benim gibi - svg.js artık svg filter plugin sahiptir. Kod örneği düşürüldü olacaktır: Muhtemelen çok geç ama yine de kayda değer bir yıl

var draw = SVG('canvas') 

draw.rect(90,90) 

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

:)