SVG, jQuery, CSS

[RonaldGJ]

Beste mensen,

Ik ben momenteel bezig met het maken van een filter in SVG. Het gaat hier om een gaussian blur.
Ik wil de blur graag animeren. Dit is geen probleem en werkt.

Ik wil graag op het moment dat er ergens op geklikt wordt een element een nieuwe class krijgt, bijvoorbeerd (class="blur"). In de css heb ik staan: (filter: url(blur.svg#blur));

Wanneer ik dit doe met de jQuery.addClass(), geeft ie wel de juiste blur, maar hij voert de animatie niet uit!

Iemand een idee om dit wel voor elkaar te krijgen?

<svg height="0" xmlns="http://www.w3.org/2000/svg">
	<filter id="blur">
		<feGaussianBlur in="SourceGraphic" stdDeviation="5">
			<animate attributeName="stdDeviation" from="0" to="5" dur="0.1s" />
		</feGaussianBlur>
	</filter>
</svg>

.blur {
	filter: url(svg/blur.svg#blur);
}

[JS]
$('.button').on('click', function(){
el.addClass('blur');
}
[/JS]

Alvast bedankt!

Gr. Ronald!