logoExtra: reloj_svg

Descripción: Este comodín sirve para mostrar un reloj analógico.


A continuación mostramos los apuntes asociados a este extra:

Sencillo reloj analógico svg
Si nos planteamos hacer el dibujo de un reloj analógico, sencillamente tenemos que hacer un círculo con doce (12) marcas indicando las horas y tres (3) líneas para las agujas.
// descripción para la sindicación:
/*
    [rss]Este comodín sirve para mostrar un reloj analógico.[/rss]
*/
header("Content-type: image/svg+xml");

$ya = getdate();
$segundero = $ya["seconds"];
$minutero = $ya["minutes"];
$hora = $ya["hours"] % 12;
$rs = $segundero * 6;
$rm = ($minutero + ($segundero / 60)) * 6;
//$rh = $hora * 30;
$rh = ($hora + ($minutero / 60) + $segundero / 3600) * 30;
echo <<< svg
<?xml version="1.0"     standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100" height="100" preserveAspectRatio="no">
    <g id="esfera">
        <circle cx="50" cy="50" r="47" fill="white" stroke="red" stroke-width="3"/>
        <line x1="50" y1="10" x2="50" y2="20" stroke="black" stroke-width="4" />

        <line x1="50" y1="10" x2="50" y2="15" stroke="black" stroke-width="1" transform="rotate(30 50 50)"/>
        <line x1="50" y1="10" x2="50" y2="15" stroke="black" stroke-width="1" transform="rotate(60 50 50)"/>

        <line x1="50" y1="10" x2="50" y2="20" stroke="black" stroke-width="4" transform="rotate(90 50 50)"/>

        <line x1="50" y1="10" x2="50" y2="15" stroke="black" stroke-width="1" transform="rotate(120 50 50)"/>
        <line x1="50" y1="10" x2="50" y2="15" stroke="black" stroke-width="1" transform="rotate(150 50 50)"/>

        <line x1="50" y1="10" x2="50" y2="20" stroke="black" stroke-width="4" transform="rotate(180 50 50)"/>

        <line x1="50" y1="10" x2="50" y2="15" stroke="black" stroke-width="1" transform="rotate(210 50 50)"/>
        <line x1="50" y1="10" x2="50" y2="15" stroke="black" stroke-width="1" transform="rotate(240 50 50)"/>

        <line x1="50" y1="10" x2="50" y2="20" stroke="black" stroke-width="4" transform="rotate(270 50 50)"/>

        <line x1="50" y1="10" x2="50" y2="15" stroke="black" stroke-width="1" transform="rotate(300 50 50)"/>
        <line x1="50" y1="10" x2="50" y2="15" stroke="black" stroke-width="1" transform="rotate(330 50 50)"/>
    </g>
    <g id="hora">
        <line x1="50" y1="25" x2="50" y2="55" stroke="black" stroke-width="3" transform="rotate($rh, 50 50)"/>
        <animateTransform attributeType="xml"
            attributeName="transform"
            type="rotate"
            from="0 50 50"
            to="360 50 50"
            dur="12h"
            repeatCount="indefinite"/>
    </g>
    <g id="minutero">
        <line x1="50" y1="15" x2="50" y2="55" stroke="blue" stroke-width="2" transform="rotate($rm, 50 50)"/>
        <animateTransform attributeType="xml"
            attributeName="transform"
            type="rotate"
            from="0 50 50"
            to="360 50 50"
            dur="1h"
            repeatCount="indefinite"/>
    </g>
    <g id="segundero">
        <line x1="50" y1="10" x2="50" y2="60" stroke="red" stroke-width="1" transform="rotate($rs, 50 50)"/>
        <animateTransform attributeType="xml"
            attributeName="transform"
            type="rotate"
            from="0 50 50"
            to="360 50 50"
            dur="1min"
            repeatCount="indefinite"/>
    </g>

</svg>
svg;

unset($css);
unset($body);

Este código ha sido leído en 45 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.reloj_svg) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018 | Otros enlaces: buscador