Courbe avec lueur externe

rgamor · 11/08/2011, 18h01

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, 12h41

Citation:

Envoyé par rgamor

un peu comme ceci:

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

rgamor · 12/08/2011, 19h08

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, 17h30

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, 10h56

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

jreaux62 · 19/08/2011, 11h40

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, 11h50

Citation:

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, 17h17

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

jreaux62 · 19/08/2011, 18h10

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>

11/08/2011, 18h01	#1
rgamor Invité régulier Inscription : avril 2009 Messages : 30 Détails du profil Informations forums : Inscription : avril 2009 Messages : 30 Points : 6 Points : 6	Courbe avec lueur externe 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?
	00

12/08/2011, 19h08	#3
rgamor Invité régulier Inscription : avril 2009 Messages : 30 Détails du profil Informations forums : Inscription : avril 2009 Messages : 30 Points : 6 Points : 6	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
	00

13/08/2011, 17h30	#4
rgamor Invité régulier Inscription : avril 2009 Messages : 30 Détails du profil Informations forums : Inscription : avril 2009 Messages : 30 Points : 6 Points : 6	est il possible en CSS avec un .maclass:hover de modifier tous les éléments appartenant à maclass lorsqu'un seul est survolé?
	00

19/08/2011, 10h56	#5
Picpus Invité régulier Romain Knezevic Inscription : novembre 2009 Messages : 9 Détails du profil Informations personnelles : Nom : Romain Knezevic Informations forums : Inscription : novembre 2009 Messages : 9 Points : 6 Points : 6	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
	00

19/08/2011, 17h17	#8
rgamor Invité régulier Inscription : avril 2009 Messages : 30 Détails du profil Informations forums : Inscription : avril 2009 Messages : 30 Points : 6 Points : 6	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email