Fichiers impliqués

touche droite de la souris, enregistrer sous ...

• horloge.shtml
• horlogesvg.php.txt (enlever l'extension txt)

Details techniques

Le code PHP est en rouge alors que la partie SVG est en bleu.

<?php 
  header("Content-type: image/svg+xml");
  print ('<?xml version="1.0" encoding="iso-8859-1"?>'); 
  $h = 12 ; // necessaire au calcul de la duree du senario
  $m = 0 ;
  $s = 0 ;
  $vh=360/(12*3600) ; // vitesse angulaire de l heure
  $vm=360/3600 ;
  $vs=360/60 ;
  $dur=($h*3600+$m*60+$s) ; //duree du senario
  $h0 = date (h) ; // heure de depart
  $m0 = date (i) ;
  $s0 = date (s) ;
  $fromh = $vh * ($h0 * 3600 + $m0 * 60 + $s0) ; // from pour l heure
  $fromm = $vm * ($m0 * 60 + $s0) ;
  $froms = $vs * $s0 ;
  $toh = $vh * ($dur + ($h0 * 3600 + $m0 * 60 + $s0)) ; //to pour l heure
  $tom = $vm * ($dur + ($m0 * 60 + $s0)) ;
  $tos = $vs * ($dur + $s0) ;
?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="300px" height="300px"> 
  
  <defs> 
    <symbol id="trait" > 
       <g style="fill:none; stroke:black; stroke-width:1"> 
         <line x1="0" y1="85" x2="0" y2="105" />
       </g> 
    </symbol> 
  </defs> 
  
  <g transform="translate(150,150)">  
    <?php for ($i=0; $i < 12 ; $i++) 
        echo '  <g transform = "rotate(', ($i*30) , ')">
        <use xlink:href="#trait" /></g>',"\n"; ?>
  </g>
  
  <g transform="translate(150,150)">  
    <g style="fill:red; stroke:black; stroke-width:1"> 
      <polygon points="-5,-70,0,-85,5,-70,0,20" />
        <animateTransform attributeName="transform" attributeType="XML"
            type="rotate" from="<?php echo $fromh; ?>"
            to="<?php echo $toh; ?>" begin="0s"
            dur="<?php echo $dur ?>s" fill="freeze" />
    </g> 
  </g>
  
  <g transform="translate(150,150)">  
    <g style="fill:yellow; stroke:black; stroke-width:1"> 
      <polygon points="-4,-85,0,-100,4,-85,0,20" />
      <animateTransform attributeName="transform" attributeType="XML"
          type="rotate" from="<?php echo $fromm; ?>"
          to="<?php echo $tom; ?>" begin="0s" 
          dur="<?php echo $dur ?>s" fill="freeze" />
    </g> 
  </g>
  
  
  <g transform="translate(150,150)">  
    <g style="fill:green; stroke:black; stroke-width:1"> 
      <polygon points="-2,-90,0,-105,2,-90,0,20" />
      <animateTransform attributeName="transform" attributeType="XML"
          type="rotate" from="<?php echo $froms; ?>"
          to="<?php echo $tos; ?>" begin="0s" 
          dur="<?php echo $dur ?>s" fill="freeze" />
    </g> 
    </g>
  
</svg>