Editando apunte: Rotando imágenes con svg

Editando apunte: Rotando imágenes con svg cerrar apuntes

ID: 102 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Programación
Etiquetas: diseño, etiquetas, imágenes, tags, webmaster
Extras: diseño, etiquetas, imágenes, tags, webmaster
apunte: - - - - - - - -

<p>
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40" height="40" viewbox="0 0 40 40"
style="float: left; border: 1px solid black; margin: 0 1em .5em 0">
		<a xlink:href='diario.jocker.php?extra=codigo&codigo=logo_animado_svg' xlink:title='logo animado'>
			<image x="0" y="0" width="40" height="40" 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>
		</a>
	</svg></a>
	[rss]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.[/rss]
	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.
</p>
<p>
	[rss]La primera de las imágenes se ha incrustado directamente en la página.[/rss] El código se muestra a continuación:
</p>
<pre class="codigo"><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></pre>

<p>
	<object data="diario.jocker.php?extra=logo_animado_svg" width="40" height="40" type="image/svg+xml" style="float: left; border: 1px solid blue; margin: 0 1em .5em 0">"></object>
	Para esta segunda presentación se ha creado un <a href="diario.jocker.php?extra=logo_animado_svg&PHPSESSID=kaccu7rlojh45sqbjkc7her2r5">fichero externo</a>, 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".
</p>

<p>

</p>
<p>
	[rss]<a href="diario.jocker.php?extra=codigo&codigo=logo_animado_svg&PHPSESSID=kaccu7rlojh45sqbjkc7her2r5"><img src="diario.jocker.php?extra=logo_animado_svg" alt="logo animado" longdesc="diario.jocker.php?extra=codigo&codigo=logo_animado_svg" type="image/svg+xml" width="40" height="40" style="float: left; border: 1px solid red; margin: 0 1em .5em 0"/></a>
	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.[/rss]
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación