Wie kann ich einen Filter zu einem SVG-Objekt in JavaScript hinzufügen?

Ich versuche, einen FeGaussianBlur-Filter zu einem SVG-Rechteck mit JavaScript zu erstellen und hinzuzufügen, mit this code als Referenz. Ich bekomme ein Rechteck, aber es ist nicht gefiltert. Was mache ich falsch?Wie kann ich einen Filter zu einem SVG-Objekt in JavaScript hinzufügen?

ich so bin versucht:

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

Quelle

2012-06-03 stonecup64

[Was haben Sie versucht?] (Http://whathaveyoutried.com/) [Stack-Überlauf ist nicht Ihr persönlicher wissenschaftlicher Assistent] (http://meta.stackexchange.com/a/128553/186879). Wir werden eher geneigt sein, Ihnen zu helfen, wenn Sie einige Anstrengungen unternehmen, um Ihr Problem zu lösen (z. B. das Posten eines Codes), als nach einem vollwertigen Beispiel/Forschung zu fragen. –

Ich habe _EDIT entfernt: Egal, es funktioniert jetzt für mich! _ Aus der Frage, wie es viel besser ist, Ihre tatsächliche Lösung in einer Antwortbox hinzuzufügen. Ich neige dazu, dies als den Preis zu betrachten, eine Frage zu stellen, selbst wenn Sie es geschafft haben, es selbst zu lösen ':)'. – halfer

Der obige Code funktioniert jetzt für mich! Man kann einfach die Methoden , setAttribute und appendChild verwenden.

Quelle

2012-06-03 11:37:58 stonecup64

Danke, dass du mit der Antwort zurückkommst –

Wenn Sie besser lesbaren Code bevorzugen - wie ich - svg.js hat jetzt eine svg filter plugin. Ihr Beispiel Code würde reduziert:

var draw = SVG('canvas') 

draw.rect(90,90) 

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

Es ist wahrscheinlich ein Jahr zu spät, aber noch erwähnenswert :)

Quelle

2013-07-27 13:20:39 wout

Wie kann ich einen Filter zu einem SVG-Objekt in JavaScript hinzufügen?

Antwort

Verwandte Themen