[SVG] zoom sur plusieurs éléments

**baris69330** · 04/06/2010, 14h45

Bonjour, je bosse actuellement sur du svg et il me faut faire un zoom sur plusieurs evenements quand je passe la souris dessus grâce aux fonctions onmouseover et onmouseout et aux evenements, j'ai deux fonctions, une qui est onmouseover=zoom(evt) et l'autre onmouseout=normal(evt)

j'ai actuellement ce code

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
 
<?xml version="1.0" encoding="ISO-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
<script><![CDATA[
 
function zoom(evt)
{
        cible = evt.target.getAttributeNS(null , "id");
        var svgdoc = evt.target.ownerDocument;
        var obj = svgdoc.getElementById(cible);
		svgdoc.getElementById(cible).setAttributeNS(null , "transform" , "matrix(2 0 0 2 ? ?)")
}
 
function normal(evt)
{
        cible = evt.target.getAttributeNS(null , "id");
        var svgdoc = evt.target.ownerDocument;
        var obj = svgdoc.getElementById(cible);
        svgdoc.getElementById(cible).setAttributeNS(null , "transform" , "matrix(1 0 0 1 ? ?)")
}
]]></script>
 
<g onmouseover="zoom(evt)" onmouseout="normal(evt)">
 
<rect id="rectangle0" x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red" transform="matrix(1 0 0 1 300 50)" /></g>
<g onmouseover="zoom(evt)" onmouseout="normal(evt)">
<rect id="rectangle1" x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red" transform="matrix(1 0 0 1 300 200)" /></g>
<g onmouseover="zoom(evt)" onmouseout="normal(evt)">
<rect id="rectangle2" x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red" transform="matrix(1 0 0 1 300 400)" />
 
</g>
 
</svg>

j'y suis pas loin il me faudrait en fait récupérer les deux dernieres valeurs de transform="matrix(1 0 0 1 300 50)" par exemple pour les inserer dans les transform des deux fonctions, là où j'ai mis des " ? "

merci

**Morbo** · 04/06/2010, 16h15

Tiens c'est marrant ton truc, je savais pas qu'on pouvait faire du javascript directement sur du svg par le navigateur.
J'ai avancé un peu :

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
<?xml version="1.0" encoding="ISO-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
<script><![CDATA[
 
function zoom(evt)
{
        cible = evt.target.getAttributeNS(null , "id");
        var svgdoc = evt.target.ownerDocument;
        var obj = svgdoc.getElementById(cible);
		var transformValue = obj.getAttributeNS(null,"transform");
		var matrixValues = transformValue.split(",");
 
		obj.setAttributeNS(null , "transform" , "matrix(2 0 0 2 "+matrixValues[4]+" "+matrixValues[5]);
}
 
function normal(evt)
{
        cible = evt.target.getAttributeNS(null , "id");
        var svgdoc = evt.target.ownerDocument;
        var obj = svgdoc.getElementById(cible);
		var transformValue = obj.getAttributeNS(null,"transform");
		var matrixValues = transformValue.split(",");
 
        obj.setAttributeNS(null , "transform" , "matrix(1 0 0 1 "+matrixValues[4]+" "+matrixValues[5]);
}
]]></script>
 
<g onmouseover="zoom(evt)" onmouseout="normal(evt)">
 
<rect id="rectangle0" x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red" transform="matrix(1 0 0 1 300 50)" /></g>
<g onmouseover="zoom(evt)" onmouseout="normal(evt)">
<rect id="rectangle1" x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red" transform="matrix(1 0 0 1 300 200)" /></g>
<g onmouseover="zoom(evt)" onmouseout="normal(evt)">
<rect id="rectangle2" x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red" transform="matrix(1 0 0 1 300 400)" />
 
</g>
 
</svg>

Je serai curieux de voir ce que tu vas en faire

.

**baris69330** · 04/06/2010, 17h28

merci !

je bosse sur un projet de dimensionnement de plaque à eau refroidisseur, et les rectangles sont les composants électroniques posés sur ces plaques. en faisant un zoom les différentes infos sur ces composants seront affichées

**baris69330** · 10/06/2010, 11h15

dis-moi comment ça se fait que ta parenthèse de matrix tu la referme pas et ça marche, quand je la rajoute ça marche plus

obj.setAttributeNS(null , "transform" , "matrix(2 0 0 2 "+matrixValues[4]+" "+matrixValues[5]);

**Morbo** · 10/06/2010, 11h49

Héhé, c'est à cause de ça :

Code :

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

var matrixValues = transformValue.split(",");

En fait "transformValue" contient "matrix(1,0,0,1,300,400)"
Si on se contente, comme là, de créer un tableau en coupant la chaine à chaque ',' :
matrixValues[0] contient 'matrix(1' et
matrixValues[5] contient '400)' => la parenthèse finale dont on se ressert

C'est un peu sale, mais j'avais la flemme de filtrer les parenthèses et en l'occurrence ç'est plus performant car nécessite moins de manipulation de chaine.

**baris69330** · 14/06/2010, 14h50

okkkk merci

**baris69330** · 15/06/2010, 09h45

Je me heurte à un nouveau problème, quand je veut réaliser un zoom sur un groupe, c'est a dire un rectangle et un texte sur ce rectangle. j'ai reussi à realiser cela avec un seul groupe mais pas plusieurs pour l'instant

voilà mon code

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
52
53
54
 
<?xml version="1.0" encoding="ISO-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
<script><![CDATA[
function zoom(evt)
{
        cible = evt.target.getAttributeNS(null , "id");
        var svgdoc = evt.target.ownerDocument;
        var obj = svgdoc.getElementById(cible);
 
        var transformValue = obj.getAttributeNS(null,"transform");
		    var matrixValues = transformValue.split(",");
 
		    obj.setAttributeNS(null , "transform" , "matrix(1.25 0 0 1.25 "+matrixValues[4]+" "+matrixValues[5]);
}
 
function normal(evt)
{
        cible = evt.target.getAttributeNS(null , "id");
        var svgdoc = evt.target.ownerDocument;
        var obj = svgdoc.getElementById(cible);
 
        var transformValue = obj.getAttributeNS(null,"transform");
		    var matrixValues = transformValue.split(",");
 
		    obj.setAttributeNS(null , "transform" , "matrix(1 0 0 1 "+matrixValues[4]+" "+matrixValues[5]);
}
]]></script>
 
 
 
<defs><linearGradient id="MonDegrade"><stop offset="5%" stop-color="blue"/><stop offset="95%" stop-color="red"/></linearGradient></defs>
<rect x="0" y="0" width="800" height="640" stroke="grey" fill="lightgrey"/>
<polyline points="0,200 , 290,145 , 450,145 , 800,200" fill="none" stroke="url(#MonDegrade)" stroke-linecap="round" stroke-width="8px"/>
<polyline points="0,200 , 290,295 , 450,295 , 800,200" fill="none" stroke="url(#MonDegrade)" stroke-linecap="round" stroke-width="8px"/>
<polyline points="0,200 , 290,495 , 450,495 , 800,200" fill="none" stroke="url(#MonDegrade)" stroke-linecap="round" stroke-width="8px"/>
 
<g id="rectangle0" transform="matrix(1 0 0 1 300 50)" onmouseover="zoom(evt)" onmouseout="normal(evt)">
<rect x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red"/>
<text x="0" y="190" font-family="Arial" fill="black">rectangle0</text>
</g>
 
<g id="rectangle1" transform="matrix(1 0 0 1 300 200)" onmouseover="zoom(evt)" onmouseout="normal(evt)">
<rect x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red"/>
<text x="0" y="190" font-family="Arial" fill="black">rectangle1</text>
</g>
 
<g id="rectangle2" transform="matrix(1 0 0 1 300 400)" onmouseover="zoom(evt)" onmouseout="normal(evt)">
<rect x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red"/>
<text x="0" y="190" font-family="Arial" fill="black">rectangle2</text>
</g>
 
</svg>

**Morbo** · 15/06/2010, 10h56

Hello,
Apparemment, tu peux pas mettre les évènements sur le groupe lui même.
Mais tu peux les mettres sur la "forme" englobante, ici les rectangles.
La transformation reste, elle au niveau du groupe.
Ca donne ça :

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
<?xml version="1.0" encoding="ISO-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script><![CDATA[
function zoom(evt,node)
{
        cible = node.getAttributeNS(null , "id");
        var svgdoc = evt.target.ownerDocument;
        var obj = svgdoc.getElementById(cible);
 
        var transformValue = obj.getAttributeNS(null,"transform");
		var matrixValues = transformValue.split(",");
 
		obj.setAttributeNS(null , "transform" , "matrix(1.25 0 0 1.25 "+matrixValues[4]+" "+matrixValues[5]);
}
 
function normal(evt,node)
{
        cible = node.getAttributeNS(null , "id");
        var svgdoc = evt.target.ownerDocument;
        var obj = svgdoc.getElementById(cible);
 
        var transformValue = obj.getAttributeNS(null,"transform");
		var matrixValues = transformValue.split(",");
 
		obj.setAttributeNS(null , "transform" , "matrix(1 0 0 1 "+matrixValues[4]+" "+matrixValues[5]);
}
]]></script>
<defs><linearGradient id="MonDegrade"><stop offset="5%" stop-color="blue"/><stop offset="95%" stop-color="red"/></linearGradient></defs>
<rect x="0" y="0" width="800" height="640" stroke="grey" fill="lightgrey"/>
<polyline points="0,200 , 290,145 , 450,145 , 800,200" fill="none" stroke="url(#MonDegrade)" stroke-linecap="round" stroke-width="8px"/>
<polyline points="0,200 , 290,295 , 450,295 , 800,200" fill="none" stroke="url(#MonDegrade)" stroke-linecap="round" stroke-width="8px"/>
<polyline points="0,200 , 290,495 , 450,495 , 800,200" fill="none" stroke="url(#MonDegrade)" stroke-linecap="round" stroke-width="8px"/>
 
<g id="rectangle0" transform="matrix(1 0 0 1 300 50)">
<rect x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red"  onmouseover="zoom(evt,evt.target.parentNode)" onmouseout="normal(evt,evt.target.parentNode)"/>
<text x="0" y="190" font-family="Arial" fill="black">rectangle0</text>
</g>
 
<g id="rectangle1" transform="matrix(1 0 0 1 300 200)" >
<rect x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red" onmouseover="zoom(evt,evt.target.parentNode)" onmouseout="normal(evt,evt.target.parentNode)"/>
<text x="0" y="190" font-family="Arial" fill="black">rectangle1</text>
</g>
 
<g id="rectangle2" transform="matrix(1 0 0 1 300 400)">
<rect x="0" y="0" width="140" height="190" stroke-width="1" stroke="black" fill="red"  onmouseover="zoom(evt,evt.target.parentNode)" onmouseout="normal(evt,evt.target.parentNode)"/>
<text x="0" y="190" font-family="Arial" fill="black">rectangle2</text>
</g>
</svg>

**baris69330** · 15/06/2010, 12h10

tu gère ça marche ! mais chose étrange ça effectue pas le décalage pour donner l'effet d'un zoom vers le centre du rectangle, comme cet exemple

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
 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200">
<script><![CDATA[
function zoom(evt)
{
        var svgdoc = evt.target.ownerDocument;
        var obj = svgdoc.getElementById("objet");
        obj.setAttribute("transform" , "matrix(2 0 0 2 200 75)");
}
 
function normal(evt)
{
        var svgdoc = evt.target.ownerDocument;
        var obj = svgdoc.getElementById("objet");
        obj.setAttribute("transform" , "matrix(1 0 0 1 200 75)");
}
]]></script>
 
<g id="objet" transform="matrix(1 0 0 1 200 75)" onmouseover="zoom(evt)" onmouseout="normal(evt)">
<rect x="-50" y="-25" width="100" height="50" fill="yellow" />
<text x="0" y="0" text-anchor="middle" font-size="12" font-family="Arial" fill="black">zoom</text>
</g>
 
</svg>

**baris69330** · 16/06/2010, 19h36

j'ai donc un zoom mais vers en bas à droite au lieu d'un zoom à partir du centre du rectangle. Toujours pas trouvé la solution, pourtant j'utilise la même solution que le code juste au dessus

**Morbo** · 17/06/2010, 19h00

Je sais pas, c'est sans doute la matrice de transformation à adapter, mais mes cours de math sont loin maintenant

.

Le truc aussi c'est que le rectangle et le texte ne sont pas centrés par rapport au référentiel du "groupe", si tu les centres tu devrais pouvoir utiliser la même matrice de transfo.
D'ailleurs dans l'exemple que tu as mis en bas, les élements sont centrés :

Code :

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

<rect x="-50" y="-25" width="100" height="50"

**baris69330** · 18/06/2010, 20h16

effectivement c'était une affaire de matrix, j'ai adapté ça

[SVG] zoom sur plusieurs éléments

XML/XSL et SOAP

Discussions similaires

Partager

Partager