Filtre SVG personnalisé, un expert dans la salle ? :)

Bonjour tout le monde,

je viens de créer un filtre personnalisé en svg et j'ai une demande très simple en apparence :
Créer une transition sur un état hover.

En gros, mon filtre permet de convertir une image en noir & blanc (plutôt bleuté en fait, c'est pour ça que j'ai utilisé un filtre personnalisé). Et j'aimerai lors du survol sur cette image en noir & blanc la faire passer en couleur (avec une petite transition fluide de .2s)

Voici mon filtre :

<svg width="0%" height="0%">
			<filter id="grayscale">
				<feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0 0.33 0.33 0.33 0 0 0.36 0.36 0.36 0 0.01 0 0 0 1 0">				
					<animate attributeName="values" from="0.3 0.3 0.3 0 0 0.33 0.33 0.33 0 0 0.36 0.36 0.36 0 0.01 0 0 0 1 0" to="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" dur="200ms" fill="freeze" />									
				</feColorMatrix>
			</filter>						
		</svg>

Comment faire pour lui dire : au survol de l'image, repasses en couleur ?
J'ai tenté des "begin: mouseover" etc etc mais sans résultats....

Actuellement le passage noir&blanc > couleur marche bien mais uniquement au chargement de la page...

Merci d'avance

si tu nous donner tout ton code et une image 'bateau' dans un codepen ou autre outil similaire pour voir ce que tu as essayer et éventuellement te proposer une correction ou solution alternative,
ça ferait avancer ton schmilblick

Bonsoir gc-nomade,

oui désolé j'ai fais une démo sur codepen, ça sera plus simple tu as raison
http://codepen.io/jlwebart/pen/wsIlu

Donc mon filtre marche bien, mais maintenant j'aimerai que l'image repasse en couleur au survol de la souris (avec une petite transition de 0.2s)

Hello,

http://dabblet.com/gist/9144853 ?

Hello,

Merci pour ta réponse, malheureusement il n'y a pas de transition sur l'état hover. le filtre svg ne supporte pas de transition en pur css3. C'est pour cette raison que je voulais faire ma transition directement dans la balise svg.

J'ai une piste avec la balise "animate" en svg mais je n'ai pas du comprendre à 100% sont fonctionnement, car ça ne marche pas ^^
Modifié par psykhe (22 Feb 2014 - 00:03)

re,
il te faudrait cloner ton image et jouer la transition sur l'opacité par exemple : http://dabblet.com/gist/9154375

gc-nomade a écrit :
re,
il te faudrait cloner ton image et jouer la transition sur l'opacité par exemple : http://dabblet.com/gist/9154375

Pas mal

Humm en effet, elle me plait pas mal cette solution
Je vais tester ça! Merci beaucoup