[SVG] Modifier une image à la volée

Salut,

Je suis débutante en SVG et je voudrais afficher un image SVG dans un fichier html, mais je voudrais ajouter des choses a cette image quand l'utilisateur demande ....je voudrais faire cela en Java?
estc-e que qqc peut me dire si cela est possible??et comment??

Merci

Je doute que ceci soit possible, la seule solution qui me parait viable, c'est de rendre la génération du SVG dynamique, et de modifier la source (attribut src) de la balise img (avec JavaScript) pour y inclure les modifications à faire...

Citation:

Envoyé par Swoög

Je doute que ceci soit possible, la seule solution qui me parait viable, c'est de rendre la génération du SVG dynamique, et de modifier la source (attribut src) de la balise img (avec JavaScript) pour y inclure les modifications à faire...

bah non... normalement, on peut animer le svg avec du javascript, j'avais vu quelques exemples, mais je n'ai jamais testé moi-même ;)

Ce ne'est peut etre pas ce qui était demandé mais il est possible d'utiliser java sur un serveur pour generer les pages contenant cette image (servlet, JSP ...) et on peut donc modifier celle ci... Au niveau de lecteur de SVG en java je n'arrive pas à me rapeller de noms mais je crois que cela existe...

On peut programmer de l'interaction directement dans le fichier SVG, notamment avec l'attribut "begin" des balises d'animation :

Exemple d'un code (il faudra cliquer sur les boutons rouge et vert pour faire apparaitre des points) :

Code:

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
 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg 
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	width="10cm" 
	height="10cm" 
	viewBox="0 0 100 100" >
	<use xlink:href="grille.svg#grille" />
	<circle id="rouge" cx="20" cy="80" r="5"  fill="red" />
	<circle id="vert" cx="40" cy="80" r="5"  fill="green" />	
	<path id="chemin"
		d="M 20,50
			a1,2 0 0,0 10,0
			a1,2 0 0,1 10,0
			a1,3 0 0,0 10,0
			a1,4 0 0,1 10,0
			a1,5 0 0,0 10,0
			a1,4 0 0,1 10,0
			a1,3 0 0,0 10,0
			a2,2 0 0,0 -70,0
			"
		fill="none" stroke="blue" stroke-width="1" />
	<circle r="1.5" stroke-width="0" fill="red"  >
		<animateMotion begin="rouge.mouseover" end="rouge.mouseout" dur="6s" fill="freeze" repeatCount="indefinite" >
				<mpath xlink:href="#chemin"/>
		</animateMotion>
	</circle>
 
	<circle r="1.5" stroke-width="0" fill="green"  >
		<animateMotion 	begin="vert.click"	end="vert.click" dur="9s"  fill="freeze"  repeatCount="indefinite" >
			<mpath xlink:href="#chemin"/>
		<animateMotion>
	</circle>
</svg>

Sinon pour insérer du javascript dans un fichier SVG j'avais réaliser une horloge :

Code:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
<?xml version="1.0" encoding="ISO-8859-1" ?><!-- ISO... au lieu d'UTF pour pouvoir utiliser les accents -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" onload="SetTime(evt)">
	<title>Animation d'une horloge</title>
	<desc>Horloge représenté avec un cercle et des chiffreS, avec 2 aiguilles sous forme de traits tournant selon le temps qui passe.</desc>
 
	  <defs>
	  <!-- Script permettant de faire tourné les aiguilles -->
    <script language="Javascript">
      <![CDATA[
 
        function SetTime(LoadEvent)
          {
            var Now = new Date(); // récupération de la date courante
 
            var Seconds = Now.getSeconds(); // Extraction des secondes courantes
            var Minutes = Now.getMinutes() + Seconds / 60; // Extraction des minutes et secondes (pour l'aiguilles des minutes)
            var Hours = Now.getHours() + Minutes / 60; // Extraction des heures et des minutes (pour l'aiguille des heures)
 
            var SVGDocument = LoadEvent.getTarget().getOwnerDocument();
 
           SVGDocument.getElementById("seconds").setAttribute('transform', 'rotate(' + (Seconds * 6) + ')'); // * 6 car 360 / 60 = 6
            SVGDocument.getElementById("minutes").setAttribute('transform', 'rotate(' + (Minutes * 6) + ')'); // * 6 car 360 / 60 = 6
            SVGDocument.getElementById("hours").setAttribute('transform', 'rotate(' + (Hours * 30) + ')');     // * 30 car 360 / 12 = 30
          }
 
      ]]>
    </script>
  </defs>
 
	<g stroke="blue">
		<circle cx="200" cy="200" r="150" fill="none" stroke-width="5" /><!-- Contour -->
 
		<g transform="translate(200,200)">
			<line x1="0" y1="-150" x2="0" y2="150" /> <!-- ligne permettant de faire les petits traits des heures -->
			<line x1="0" y1="-150" x2="0" y2="150" transform="rotate(30)" /> 
			<line x1="0" y1="-150" x2="0" y2="150" transform="rotate(60)" /> 
			<line x1="0" y1="-150" x2="0" y2="150" transform="rotate(90)" /> 
			<line x1="0" y1="-150" x2="0" y2="150" transform="rotate(120)" /> 
			<line x1="0" y1="-150" x2="0" y2="150" transform="rotate(150)" /> 
 
			<circle r="130" fill="white" stroke="white" /><!-- Permet de caché les lignes pour simuler des petits traits -->			
 
		</g>
 
		<g transform="translate(0,8)" font-size="20" font-family="Verdana" fill="blue" text-anchor="middle">
			<text transform="translate(200,90) " > 12 </text>
			<text transform="translate(200,200) rotate(30) translate(0,-110) rotate(-30)" >1</text>
			<text transform="translate(200,200) rotate(60) translate(0,-110) rotate(-60)" >2</text>
			<text transform="translate(200,200) rotate(90) translate(0,-110) rotate(-90)">3</text>
			<text transform="translate(200,200) rotate(120) translate(0,-110) rotate(-120)">4</text>
			<text transform="translate(200,200) rotate(150) translate(0,-110) rotate(-150)">5</text>
			<text transform="translate(200,200) rotate(180) translate(0,-110) rotate(-180)">6</text>
			<text transform="translate(200,200) rotate(-150) translate(0,-110) rotate(150)">7</text>
			<text transform="translate(200,200) rotate(-120) translate(0,-110) rotate(120)">8</text>
			<text transform="translate(200,200) rotate(-90) translate(0,-110) rotate(90)">9</text>
			<text transform="translate(200,200) rotate(-60) translate(0,-110) rotate(60)">10</text>
			<text transform="translate(200,200) rotate(-30) translate(0,-110) rotate(30)">11</text>
		</g>
	<g transform="translate(200,200)">
			<g id="hours"> <!-- Aiguille des heures -->		
				<line x1="0" y1="0" x2="0" y2="-60"  stroke="rgb(0,0,150)" stroke-width="6" >	
					<animateTransform 
						attributeName="transform" 
						type="rotate"
						from="0" to="360"
						attributeType="XML" 
						begin="0s"
						dur="43200s" 
						repeatCount="indefinite" />
				</line>
			<g>
 
			<g id="minutes"><!-- Aiguille des minutes -->		
				<line x1="0" y1="0" x2="0" y2="-80"  stroke="rgb(0,150,0)" stroke-width="3" >
					<animateTransform 
						attributeName="transform" 
						type="rotate"
						from="0" to="360"
						dur="3600s"
						repeatCount="indefinite" 
						/>
				</line>
			</g>
			<g id="seconds"> <!-- Aiguille des secondes -->		
				<line x1="0" y1="0" x2="0" y2="-120" stroke="rgb(240,0,0)" stroke-width="1" >
					<animateTransform 
						attributeName="transform" 
						type="rotate"
						from="0" to="360"
						dur="60s"
						repeatCount="indefinite" 
						/>
				</line>
			</g>
 
		</g>	
		<circle r="6" fill="blue" /><!-- Point central -->
	</g>	
</svg>

J'espère que ça pourra t'aidé...