Dynamiczna modyfikacja filtru SVG za pomocą javascript

Question

Próbuję utworzyć dynamiczny efekt rozmycia, który można modyfikować za pomocą javascript w locie.

Na początek, Używam tego bardzo prosty filtr SVG:

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

stdDeviation zaczyna się od 0 i chcę, aby być w stanie zmienić z javascript. Wypróbowałem kilka różnych rzeczy, ale nie byłem w stanie go przygwoździć.

Po pierwsze (i powinien pamiętać, że używam jQuery) Starałem się po prostu wybrać element feGaussianBlur i modyfikować jego atrybut:

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

To nie zastąpić już istniejący atrybut jak się spodziewałem, ale raczej, dodał inny, zostawiając mnie z <feGaussianBlur stdDeviation="0" stdDeviation="5" /> Usunięcie pierwotnego stdDeviation z HTML spowodowało, że był tylko jeden atrybut po zmianie, ale nie przyniósł żadnego efektu.

Następnie starałem się po prostu zastąpić zawartość filtra na nowy:

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

Tym razem nie tylko nie to uda się zmienia, ale to spowodowało element, który to filtr jest stosowany to, aby zniknąć całkowicie (zakładam, że filtr był uszkodzony lub somesuch).

Próbowałem nawet ponownie zastosować deklarację css dla filtra, dla obu poprzednich przypadków.

Jedną rzeczą, którą wypróbowałem, która działała, było zbudowanie 10 różnych filtrów, z 10 różnymi wartościami, a następnie zamiast zmiany SVG za pomocą javascript, po prostu ponownie przypisałem css do innego identyfikatora filtru. Szczerze mówiąc, takie podejście wydaje się trochę bardziej ... właściwe? Dużym minusem jest jednak to, że nie jest bardzo wszechstronny i wymaga wiele pracy, aby coś zmienić. Ponadto wolałbym używać wartości z miejscem dziesiętnym, co wymagałoby 100 deklaracji filtrów do wykonania.

Moje pytanie brzmi: czy istnieje dobry sposób dynamicznego modyfikowania filtru SVG (w moim przypadku, filtr rozmycia) przy użyciu javascript? Jeśli tak, to czy jest to podejście godne szacunku, jeśli chodzi o semantykę i standardy? Jeśli nic więcej, jestem bardziej niż chętny, aby powrócić do mojego rozwiązania polegającego na użyciu kilku (mogę żyć bez miejsc dziesiętnych) filtrów i zamiany ich, ale chcę najpierw zbadać moje opcje.

Jeśli nie masz rozwiązania, ale możesz mi przynajmniej wytłumaczyć, dlaczego moje pierwsze starania nie zadziałały, daj mi znać! Jestem ciekawy, jakie są tego powody.

Answer 1

Byłoby łatwiej zrobić to za pomocą zwykłego DOM niż jquery. Przesuń id do elementu feGaussianBlur

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

A potem

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

lub alternatywnie

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