SVG +J avaScript = Flash(ActionScript) ??

Version imprimable

27/06/2006, 13h42
Extra-Nitro

SVG +J avaScript = Flash(ActionScript) ??

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.
28/06/2006, 18h48
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 :pleure:
(enfin c'était il y a plus d'un an)
29/06/2006, 22h20
Extra-Nitro

Bin il me semble qu'IE7 sort cet été, peut etre sera il integré...
30/06/2006, 08h26
gorgonite

Citation:

Envoyé par Extra-Nitro

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

il faut un plugin de chez adobe...
04/07/2006, 10h45
Extra-Nitro

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

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

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
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.

06/08/2006, 22h20
Extra-Nitro

J'ai une question : concurence ils java ( avec les applet ) ?

J'ai essayé on hologe et elle se lance a la bonne heure chez moi (juste un decalage qui doit être du au fait que mon serveur est celui d'ifrance et que j'habite en belgique.
07/08/2006, 09h26
Fildz

Ah oui elle se lance à la bonne heure, au temps pour moi.

Maintenant ta question c'est de savoir si SVG+JS concurrence les applets Java ?
Les applets sont basé sur le langage java, avec tous les avantages que celui ci apporte (programmation objet, programmation réseau, et il est aussi possible de faire de la 3D etc.), bref java permet de faire quasiment tout ce qu'on veut. Remarque on peut aussi faire tout ça en Flash (et c'est d'ailleur plus simple à programmer et à intégré dans une belle interface)... Bref en fin de compte SVG+JS c'est vraiment loin derriere ces deux technologies...
15/08/2006, 18h58
kedare

Citation:

Envoyé par Extra-Nitro

J'ai une question : concurence ils java ( avec les applet )?

c'est pas comparrable
Svg[+js] , ce sont des annimation / scripts
les Applets sont des applications (on peut comparrer ca comme un ActiveX)
03/09/2006, 18h09
Extra-Nitro

J'ai posté sur le forum JavaScript pour demander si il y avait moyen de faire des classes en JS car SVG ne sera pas très utile si on ne peut pas créer d'objet et de classes...C'est pour l'instant le principal defautd'ailleur.