dynamisch ein SVG-Filter mit Javascript Modifizieren

Question

Ich versuche, eine dynamische Unschärfe-Effekt zu erzeugen, die auf der Fliege mit Javascript kann geändert werden.

zu beginnen, ich bin mit diesen wirklich einfach svg Filter:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<filter id="blur"> 
<feGaussianBlur stdDeviation="0" /> 
</filter> 
</svg> 

Die StdDeviation beginnt bei 0, und ich möchte das ändern mit dem Javascript können. Ich habe ein paar verschiedene Dinge ausprobiert, aber ich war noch nicht ganz in der Lage, es festzunageln.

Erstens (und ich sollte anmerken, dass ich jQuery bin mit) Ich habe versucht, einfach die feGaussianBlur Element wählen und ändern es ist Attribut:

$('feGaussianBlur').attr('stdDeviation',5); 

Dies ist nicht das bereits vorhandene Attribut ersetzen hat, wie ich erwartet hatte, sondern fügte eine andere hinzu und läßt mich mit <feGaussianBlur stdDeviation="0" stdDeviation="5" /> das Original StdDeviation aus dem HTML Entfernen macht es so, dass es nur ein Attribut nach dem Wechsel war, aber es hatte keine Wirkung.

Als nächstes versuchte ich einfach, um den Inhalt des Filters mit dem neuen zu ersetzen:

$('filter#blur').html('<feGaussianBlur stdDeviation="5" />'); 

Diesmal nicht nur, dass es nicht gelingen, bei der Veränderung, aber es verursachte das Element, dass diese Filter angewandt wird zu, um vollständig zu verschwinden (ich nehme an, der Filter war beschädigt, oder somesuch).

Ich habe sogar versucht erneut die Anwendung der CSS-Deklaration für den Filter danach, für die beiden vorherigen Fällen.

Die eine Sache, die ich versuchte, dass DID funktioniert, war, 10 verschiedene Filter mit 10 verschiedenen Werten aufzubauen, und dann änderte ich das CSS nicht einfach mit einer anderen Filter-ID. Um ehrlich zu sein, scheint dieser Ansatz ein bisschen mehr ... richtig zu sein? Der große Nachteil ist jedoch, dass es nicht sehr vielseitig ist und viel Arbeit erfordert, um Dinge zu ändern. Außerdem würde ich lieber Werte mit einer Dezimalstelle verwenden, für die 100 Filterdeklarationen erforderlich wären.

Also, meine Frage ist ... Gibt es eine gute Möglichkeit, einen SVG-Filter (in meinem Fall den Unschärfe-Filter speziell) dynamisch mit Javascript zu ändern? Wenn ja, ist das ein respektabler Ansatz in Bezug auf Semantik und Standards? Wenn nichts anderes, bin ich mehr als willens, zu meiner Lösung zurückzukehren, ein paar (ich kann ohne Dezimalzahlen leben) Filter zu verwenden und sie auszuwechseln, aber ich möchte zuerst meine Optionen erkunden.

Oder, wenn Sie keine Lösung haben, aber mir zumindest erklären konnten, warum meine ersten Paarversuche nicht funktionierten, lassen Sie es mich wissen! Ich bin gespannt was die Gründe dafür sind.

Answer 1

Es wäre einfacher, dies mit gewöhnlichem DOM zu tun, anstatt jquery. Bewegen Sie die ID auf dem feGaussianBlur Element

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<filter> 
<feGaussianBlur id="blur" stdDeviation="0" /> 
</filter> 
</svg> 

Und dann

document.getElementById("blur").setAttribute("stdDeviation", "5"); 

oder alternativ

document.getElementById("blur").setStdDeviation(5, 5);