Editando apunte: SVG: Recorridos circulares

Editando apunte: SVG: Recorridos circulares cerrar apuntes

ID: 127 (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>	
	[rss]Juguemos a encontrar diferencias entre las dos imágenes que vemos junto a este párrafo... Ambas tienen el mismo color, el mismo borde y la misma forma.[/rss] Entonces... ¿Hay diferencias?
</p>
<p>
	Pues si que hay una sutil diferencia, la primera imagen está construida por un círculo y la segunda por un camino o recorrido "path".
	A continuación mostramos el código de esas imágenes:
</p>
<pre class="codigo"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50px" height="50px">
	<circle fill="#ff6666" cx="50" cy="50" r="49" stroke="#000000" transform="scale(.5)"/>
</svg>

<p>
	Y ¿para qué puede interesarnos hacer un circulo con un camino "path"?
	Veamos un sencillo ejemplo:
</p>

<p>
	Junto a estas líneas vemos que "El mundo gira...", una imagen que hemos sacado de nuestra <a href="http://www.pepemolina.com/diario.jocker.php?extra=imagenes">galería</a>,
que representa a nuestro planeta girando permanentemente.
	Pero el texto con el que hemos etiquetado a nuestra imagen también gira de la misma manera.
</p>
<p>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80px" height="80px" style="padding: 1em; border: 1px solid blue; margin: 0 0 .5em 1em; float: right;" preserveAspectRatio="none" viewBox="0 0 100 100">
		<use xlink:href="#vuelta_horaria" fill="url(#fondo_svg)" stroke="blue"/>
		<image xlink:href="diario.imagen.php?id=12&max=100" x="10" y="10" width="80" height="80" />
		<text x="0" y="0" style="font-weight: bold">
			<textpath xlink:href="#vuelta_horaria" text-anchor="middle" startoffset="25%">
				<tspan dy="-4">
					PEPEMOLINA.COM
				</tspan>
			</textpath>
		</text>
	</svg>

<p>
	El código de las dos imágenes etiquetadas con el nombre del dominio "pepemolina.com", del párrafo anterior es el siguiente:
</p>
<pre class="codigo"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80px" height="80px" style="padding: 1em; border: 1px solid blue; margin: 0 0 .5em 1em; float: right;" preserveAspectRatio="none" viewBox="0 0 100 100">
	<use xlink:href="#vuelta_horaria" fill="pink" stroke="blue"/>
	<image xlink:href="diario.imagen.php?id=12&max=100" x="0" y="0" width="100%" height="100%" />
	<text x="0" y="0" style="font-weight: bold">
		<textpath xlink:href="#vuelta_horaria" text-anchor="middle" startoffset="25%">
			<tspan dy="-4">
				PEPEMOLINA.COM
			</tspan>
		</textpath>
	</text>
</svg>

<p>
	Previamente habíamos definido los recorridos junto al fondo en degradado del círculo de una de ellas en otra etiqueta svg:
</p>

<p>
	Con respecto a la alineación centrada del texto en un recorrido, debemos poner el atributo "text-anchor" con el valor "middle" y el atributo "starOffset" con el valor "50%". Notese que hemos asignado el valor "25%" en un recorrido circular para centrar el texto en la parte superior del recorrido.
</p>

<p>
	La manera de obtener los recorridos circulares está basada en el algoritmo: 
</p>

<pre class="codigo"><path
	d="
		M cx cy
		m -r, 0
		a r,r 0 1,0 (r * 2),0
		a r,r 0 1,0 -(r * 2),0
	"
/></pre>
<p>
	La discusión donde obtuvimos el algoritmo es "<a href="http://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path">Circle drawing with SVG's arc path</a>".
</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