Discussion :

[Extra-Nitro]

Bonjour a tous, je vais vous poser quelques question.

Déja dans developpement web divers (tutoriels), je n'ai pas vu le SVG( Scalable Vectorial Graphique), ce n'est pas un language de programmation(comme l'html) certe, mais je me demande pourquoi n'est il pas repris ici, et ce que vous en pensez.

Pour ceux qui connaissent, on dit souvent qu'utilisé avec le JavaScript on peut réaliser des application web(si le terme convient) telle que les jeux Flash bien connus. Qu'en est t'il d'apprès vous?

Merci beaucoup et d'autre information sont la bien venue a ce sujet.

[gorgonite]

le svg est encore au stade du développement... tous les navigateurs ne le supportent pas nativement, et les plugins n'ont pas tous les mêmes fonctionnalités.
ensuite je n'ai jamais réussi à intégrer le svg dans une page xhtml, j'ai été obligé de passer par <object> et donc je n'ai jamais pu faire de javascript avec
(enfin c'était il y a plus d'un an)

[Extra-Nitro]

Bin il me semble qu'IE7 sort cet été, peut etre sera il integré...

[gorgonite]

Bin il me semble qu'IE7 sort cet été, peut etre sera il integré...

il faut un plugin de chez adobe...

[Extra-Nitro]

J'ai de mauvais souvenir de la fois ou j'ai telechargé le plugin d'adobe quils me conseilllaient...

[Fildz]

SVG + Javascript ca fonctionne, voila une horloge qui est animé par ce dernier :

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
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
102
103
104
<?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>

Le problème c'est que je n'ai pas trouvé comment passé une variable en paramètre a SVG, donc l'horloge ne commence pas à tourné a partir de l'heure actuel...no comment.

Mais comme la dit gorgonite actuellement le SVG est très mal géré. Une chose est certaine c'est que SVG + Javascript est très très loin de concurrencé Flash(avec Actionscript) sur les plans de la popularité, de la simplicité, de la puissance (avez-vous vu les applications Flex !?) et de l'esthétique.