Courbe avec lueur externe

**rgamor** · 11/08/2011, 19h01

Bonjour,
je cherche à dessiner des courbes en svg avec une lueur externe, un peu comme le rayonnement d'un sabre laser.

ou un peu comme ceci:

mon problème est que je n'arrive pas à faire cette lueur, est ce possible?

**kOrt3x** · 12/08/2011, 13h41

Envoyé par rgamor

un peu comme ceci:

??? je pense que tu as oublié quelque chose

**rgamor** · 12/08/2011, 20h08

désolé je pensais que ce problème ce réglait en CSS et en cherchant j'ai trouvé des pistes en SVG

qu'est ce que j'ai oublié?

j'y arrive petit à petit:
http://jsfiddle.net/BvtaT/1/

j'aimerai maintenant que la différence entre le flou et la forme soit moins dur et donner un peu plus d'intensité à la lueur

**rgamor** · 13/08/2011, 18h30

est il possible en CSS avec un .maclass:hover de modifier tous les éléments appartenant à maclass lorsqu'un seul est survolé?

**Picpus** · 19/08/2011, 11h56

Je sais pas avec du css mais en JS tu peux faire (dans une boucle)

Code :

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

getElementByClassName("notStroked")[i].setAttribute("class", "stroked")

sur onmouseover et l'inverse sur onmouseout

Invité · 19/08/2011, 12h40

Bonjour,
un petit test :

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<script type="text/javascript">
	function light()
	{
		var elem = document.getElementsByClassName("essai");
		for (var i = 0; i < elem.length; i++) {
			elem[i].setAttribute("class", "essai light");
		}
		var elem2 = document.getElementsByClassName("essai dark");
		for (var i = 0; i < elem2.length; i++) {
			elem2[i].setAttribute("class", "essai light");
		}
	};
	function dark()
	{
		var elem = document.getElementsByClassName("essai");
		for (var i = 0; i < elem.length; i++) {
			elem[i].setAttribute("class", "essai dark");
		}
		var elem2 = document.getElementsByClassName("essai light");
		for (var i = 0; i < elem2.length; i++) {
			elem2[i].setAttribute("class", "essai dark");
		}
	};
	</script>
 
	<style type="text/css">
.essai { background:#ccc; color:black; font-weight:normal; }
.light { background:yellow; color:red; font-weight:bold; }
.dark { color:green; }
	</style>
</head>
 
<body>
 
<span onmouseover="light();" onmouseout="dark();">tester ici</span>
<hr />
<div class="essai">tyui tryutru tyutryu</div>
<hr />
<div>qsd qsdqs dqsq</div>
<hr />
<div class="essai">v xcvbxgfhs hgfhsdtrh sdthgfhgfdh dgfhdf ghd gh</div>
 
</body>
</html>

Fonctionne sur firefox, safari ...
mais comme d'habitude, PAS sur I.E.(8) ...

**Picpus** · 19/08/2011, 12h50

Envoyé par jreaux62

Bonjour,
un petit test :

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<script type="text/javascript">
	function light()
	{
		var elem = document.getElementsByClassName("essai");
		for (var i = 0; i < elem.length; i++) {
			elem[i].setAttribute("class", "essai light");
		}
		var elem2 = document.getElementsByClassName("essai dark");
		for (var i = 0; i < elem2.length; i++) {
			elem2[i].setAttribute("class", "essai light");
		}
	};
	function dark()
	{
		var elem = document.getElementsByClassName("essai");
		for (var i = 0; i < elem.length; i++) {
			elem[i].setAttribute("class", "essai dark");
		}
		var elem2 = document.getElementsByClassName("essai light");
		for (var i = 0; i < elem2.length; i++) {
			elem2[i].setAttribute("class", "essai dark");
		}
	};
	</script>
 
	<style type="text/css">
.essai { background:#ccc; color:black; font-weight:normal; }
.light { background:yellow; color:red; font-weight:bold; }
.dark { color:green; }
	</style>
</head>
 
<body>
 
<span onmouseover="light();" onmouseout="dark();">tester ici</span>
<hr />
<div class="essai">tyui tryutru tyutryu</div>
<hr />
<div>qsd qsdqs dqsq</div>
<hr />
<div class="essai">v xcvbxgfhs hgfhsdtrh sdthgfhgfdh dgfhdf ghd gh</div>
 
</body>
</html>

Fonctionne sur firefox, safari ...
mais comme d'habitude, PAS sur I.E.(8) ...

:'( : c'est le code que j'utilise à peu de choses prés et qui en effet ne marche pas sous IE8

Une idée te vient pour contourner ? Et pour la version 9 ? (je l'ai pas et vraiment j'ai pas envie de l'installer)

**rgamor** · 19/08/2011, 18h17

ie9 ne gère pas non plus la méthode getElementsByClassName() mais je pense qu'en utilisant jQuery et son sélecteur $(.taclass)... ça peut marcher

Invité · 19/08/2011, 19h10

Avec jquery, ca fonctionne aussi sur IE8 !!

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<!-- Scripts Google : initialisation jquery -->
    <script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
	$(function() {
		$('.enlight').mouseover(function() {
			$('.essai').addClass('light');
		});
		$('.enlight').mouseout(function() {
			$('.essai').removeClass('light');
		});
	});
	</script>
 
	<style type="text/css">
.essai { background:#ccc; color:black; font-weight:normal; }
.light { background:yellow; color:red; font-weight:bold; }
	</style>
</head>
 
<body>
 
<span class="enlight">tester ici</span>
<hr />
<div class="essai">tyui tryutru tyutryu</div>
<hr />
<div>qsd qsdqs dqsq</div>
<hr />
<div class="essai">v xcvbxgfhs hgfhsdtrh sdthgfhgfdh dgfhdf ghd gh</div>
 
</body>
</html>

Courbe avec lueur externe

CSS

Discussions similaires

Partager

Partager