El diario de Pepe Molina (Caricatos)

A veces queremos un efecto sencillo en alguna de las imágenes que ponemos en nuestras páginas y tenemos que depender de javascript, y en ocasiones con códigos realmente complejos.

Última caricatura

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

RSS de las imágenes:

La Cita

No basta tener buen ingenio; lo principal es aplicarlo bien

René Descartes, filósofo y matemático francés (1596-1650).

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

Mis Enlaces

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

Mis Clientes

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

Mis Amigos Informáticos

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

Mis Amigos Artistas

Las recomendaciones que proponemos son de índole variada.

Mis recomendaciones

Aquí un cajón de sastre de enlaces.

Interés General

Nos referencian desde sitios de toda índole.

Referencias externas

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

Rotando imágenes con svg

Publicado el día 13 de noviembre de 2012
id=102; categorías: Vicisitudes de un Webmaster, Programación

A veces queremos un efecto sencillo en alguna de las imágenes que ponemos en nuestras páginas y tenemos que depender de javascript, y en ocasiones con códigos realmente complejos. He de admitir que no todos los navegadores reproducen las imágenes svg de la misma manera, así que iremos indicando cómo incrustarlas para notar las diferencias.

La primera de las imágenes se ha incrustado directamente en la página. El código se muestra a continuación:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40px" height="40px" viewbox="0 0 40 40"
style="float: left; margin: 0 1em; border: 1px solid black; margin: 0 1em .5em 0">
	<image x="0" y="0" width="40px" height="40px" xlink:href="http://www.pepemolina.com/logo.png">
		<animateTransform attributeType="xml"
			attributeName="transform"
			type="rotate"
			from="0 20 20"
			to="360 20 20"
			dur="6s"
			repeatCount="indefinite"/>
	</image>
</svg>

Para esta segunda presentación se ha creado un fichero externo, y se ha utilizado una etiqueta object; donde se ha asociado el fichero externo a su atributo "data", y además hemos especificado el mime-type "image/svg+xml" en el atributo "type".

La imagen que está en este párrafo se ha insertado con la etiqueta "iframe"; al igual que en el anterior caso, usamos el mismo atributo "type" con el mismo valor mime-type: "image/svg+xml", y la dirección URL la asociamos al atributo "src".

Y esta última imagen se ha mostrado con la etiqueta "img", donde también utilizamos el atributo type, y como toda imagen tiene su atributo alt y como nos gusta hacer en este diario, también ponemos la etiqueta longdesc con la dirección de su descripción.