Lancer l'animation d'un svg path sur ":over" d'une image

**foxburning** · 25/09/2019, 20h41

Bonjour à tous

,

Dans ma page html, j'ai deux éléments. Un bloc SVG avec un objet Path et un bloc image. Pour le moment j'arrive à animer le PATH au chargement de ma page mais ce que je souhaiterais est que l'animation se déclenche seulement si la souris passe au dessus de l'image, et qu'elle fasse le chemin inverse pour s'effacer lorsque la souris n'est plus sur l'image.

Place au code CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
*{
	margin:0;
	padding:0;
}
 
.body{
	width: 100%;
	height:100%;
}
 
.container {
   margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
 
.test{
	position: absolute;
  top: 50%;
  left: 50%;
	width: 200px;
	height:100px;
}
 
.test-path{
	fill:none;
	stroke:orange;
	stroke-width:7;
	stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
	animation: animtest 2.5s forwards;
}
.my-image{
position: absolute;
  top: 70%;
  left: 50%;
  width: 100px;
  height:100px;
  opacity: 0.4;
}
 
.my-image:hover{
  opacity: 1;
}
@keyframes animtest {
  from {stroke-dashoffset: 1000;}
  to {stroke-dashoffset: 0;}
}

Place au

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>TEST SVG PATH</title>
<link rel="stylesheet" type="text/css" href="css/test.css" />
</head>
<body>
		<div class="container">
		<div class= "test">
		<svg>
			<path class="test-path" d="M0,50,100,50 M 110, 50 m -8, 0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0 Z"/>
		</svg></div>
		<div class="my-image"><img src="https://www.w3schools.com/tags/smiley.gif" alt="test image"></div>
	</div>
</body>
</html>

Si quelqu'un sait comment faire, je suis preneur de toutes idées

Invité · 26/09/2019, 10h40

Bonjour,

Pour pouvoir le faire en CSS, il faut que "my-image" soit avant "test".

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
      <div class="my-image"><img src="https://www.w3schools.com/tags/smiley.gif" alt="test image"></div>
      <div class= "test"><svg><path class="test-path" d="M0,50,100,50 M 110, 50 m -8, 0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0 Z"/></svg></div>

Ensuite, remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.my-image{
...

par

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.my-image:hover + .test .test-path {
position: absolute;
  top: 70%;
  left: 50%;
  width: 100px;
  height:100px;
  opacity: 0.4; animation: animtest 2.5s forwards;
}

**NoSmoking** · 26/09/2019, 13h08

Bonjour,

et qu'elle fasse le chemin inverse pour s'effacer lorsque la souris n'est plus sur l'image.

il n'existe pas de pseudo-classe « :out » en CSS donc dans ton cas il me semble préférable de gérer cela directement en utilisant les animations SVG, même si cela est également faisable en JavaScript en manipulant les classes.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<svg>
    <image id="image" xlink:href="https://www.w3schools.com/tags/smiley.gif" />
    <path class="test-path" d="M0,50,100,50 M 110, 50 m -8, 0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0 Z">
        <animate attributeName="stroke-dashoffset" attributeType="CSS" from="1000" to="0" begin="image.mouseover" dur="2.5s" fill="freeze" />
        <animate attributeName="stroke-dashoffset" attributeType="CSS" from="0" to="1000" begin="image.mouseout" dur="1.5s" fill="freeze" />
    </path>
</svg>

Lancer l'animation d'un svg path sur ":over" d'une image

CSS

Vue hybride

Discussions similaires

Partager

Partager