logo El diario de Pepe Molina (Caricatos)

yo

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.

Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss

La Cita

No escribo sobre mis experiencias, sino desde fuera de ellas

John Ashbery, Poeta estadounidense (1927-).

En esta zona están las páginas personales del autor.

Mis clientes ahora también son mis amigos (aunque les cobre).

En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..

En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)

Las recomendaciones que proponemos son de índole variada.

Aquí un cajón de sastre de enlaces.

Nos referencian desde sitios de toda índole.

Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Sencillo reloj analógico svg

emoticón de Caricatos Publicado el día 14 de noviembre de 2012
id=103; categorías: Vicisitudes de un Webmaster, Programación

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. Pues con el formato svg es tan sencillo como eso.

Con respecto a la animación de las agujas, la idea es que el segundero da una vuelta completa (360º) en un minuto; el minutero lo hace en una hora y la aguja horaria la da en 12 horas. Pues con el formato svg, también es tan sencillo como eso.

Lo único que hemos hecho con un lenguaje distinto al svg+xml es la ubicación inicial de las agujas: 

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 + ($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;

reloj analógico estirado En este caso la hora que mostramos es la del servidor donde está alojada la página, pero para otro apunte lo ajustaremos con la hora del navegador.

Al ser svg un lenguaje "escalable", podemos crear el efecto de relojes ovalados simplemente aplicando estilos distintos en altura y anchura (width-height) de la imagen.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.103) valor

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

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

Historial de navegación

Esta página ha sido visitada en 6871 ocasiones

Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.

Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.

Una buena forma de buscar un apunte es a partir de su categoría.

También es posible buscar apuntes por medio de las etiquetas (tags).

Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.

Desde este recuadro se puede hacer una búsqueda cronológica.

Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

../diario.imagen.php?id=2&max=480
enlace a la postal
Copyright © 2002-2023 www.pepemolina.com
RSS rss | Ver Mapa del sitio