El diario de Pepe Molina (Caricatos)
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.
Última caricatura
IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas
RSS de las imágenes: 
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.
SVG: Recorridos circulares
Publicado el día 01 de diciembre de 2013id=127; categorías: Vicisitudes de un Webmaster, Programación
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. Entonces... ¿Hay diferencias?
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:
<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> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50px" height="50px"> <path fill="#ff6666" stroke="#000000" d="M 50, 50 m -49, 0 a 49, 49 0 1, 0 98, 0 a 49, 49 0 1, 0 -98, 0" transform="scale(.5)"/> </svg>
Y ¿para qué puede interesarnos hacer un circulo con un camino "path"? Veamos un sencillo ejemplo:
Junto a estas líneas vemos que "El mundo gira...", una imagen que hemos sacado de nuestra galerí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.
La intención de usar dos arcos para crear un círculo, en nuestro caso es para adaptar un texto a esos arcos. También podemos valernos de uno solo de los arcos mencionados para alinear un texto a la línea base de un semicírculo.
Sobre el uso de recorridos para alinear textos debemos tener en cuenta información adicional como el tipo de alineación y el lugar donde empezaremos el recorrido.
El código de las dos imágenes etiquetadas con el nombre del dominio "pepemolina.com", del párrafo anterior es el siguiente:
<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> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="50px" style="padding: 1em; border: 1px solid blue; margin: 0 0 .5em 1em; float: right;" preserveAspectRatio="none" viewBox="0 0 100 50"> <text x="0" y="0" style="font-weight: bold;"> <textpath xlink:href="#media_vuelta_inversa" text-anchor="middle" startoffset="50%" method="align" > <tspan dy="10"> PEPEMOLINA.COM </tspan> </textpath> </text> <use xlink:href="#media_vuelta_inversa" fill="none" stroke="black"> </svg>
Previamente habíamos definido los recorridos junto al fondo en degradado del círculo de una de ellas en otra etiqueta svg:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> <defs> <path id="vuelta_horaria" d="M 50, 50 m -50 0 a 50, 50 0 1, 1 100, 0 a 50, 50 0 1, 1 -100, 0"/> <path id="vuelta_inversa" d="M 50, 50 m -50 0 a 50, 50 0 1, 0 100, 0 a 50, 50 0 1, 0 -100, 0"/> <path id="media_vuelta_horaria" d="M 0, 50 a 50, 50 0 1, 1 100, 0"/> <path id="media_vuelta_inversa" d="M 0, 0 a 50, 50 0 1, 0 100, 0"/> <radialGradient id="fondo_svg" cx="50%" cy="50%" r="50%"> <stop offset="60%" style="stop-color: white; stop-opacity: 1" /> <stop offset="80%" style="stop-color: gold; stop-opacity: 1" /> <stop offset="100%" style="stop-color: magenta; stop-opacity: 1" /> </radialGradient> </defs> </svg>
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.
Y poco más...
La manera de obtener los recorridos circulares está basada en el algoritmo:
<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 " />
La discusión donde obtuvimos el algoritmo es "Circle drawing with SVG's arc path".
Zona de comentarios
Este apunte aún no tiene comentarios.
Evaluación
Valoración de esta página: (apunte.127)
Historial de navegación
Esta página ha sido visitada en 6820 ocasiones
Disponemos de rss
Y del Mapa del sitio, además del sitemap.xml.
Aquí podemos encontrar los apuntes más visitados.
Top 10 
"Top 10" reemplaza a la sección Últimos apuntes.
Una buena forma de buscar un apunte es a partir de su categoría.
Categorías (11)
- Caricatos (20)
- Así se hizo (41)
- Vicisitudes de un Webmaster (136)
- Mentes pensantes (9)
- Eventos y efemérides (9)
- Globalización (66)
- Mamarrachadas (6)
- Artes y oficios (12)
- Programación (112)
- Caricaturas y caricaturistas (15)
- Experiencias SEO (11)
También es posible buscar apuntes por medio de las etiquetas (tags).
Etiquetas
Hemos decidido poner al alcance de todos algunos comodines.
Extras
- listado de caricaturas
- listado de imágenes
- listado de extras
- listado de categorías
- listado de etiquetas
- listado de postales
- grupos de apuntes
- buscador interno
- anuario 2010
- anuario 2011
- anuario 2012
- anuario 2013
- anuario 2014
- anuario 2015
- anuario 2016
- anuario 2017
- anuario 2018
- anuario 2019
- anuario 2020
- anuario 2021
- anuario 2022
- anuario 2023
Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:
También estamos recopilando antiguas páginas del sitio.
Otras páginas del dominio
Desde este recuadro se puede hacer una búsqueda cronológica.
Archivos
- 2017 (7)
- 2016 (2)
- 2015 (6)
- 2014 (12)
- 2013 (20)
- diciembre (2)
- noviembre (1)
- octubre (1)
- septiembre (1)
- agosto (1)
- junio (1)
- mayo (2)
- abril (2)
- marzo (1)
- febrero (3)
- enero (5)
- 2012 (45)
- diciembre (3)
- noviembre (6)
- octubre (2)
- septiembre (4)
- agosto (2)
- julio (2)
- junio (3)
- mayo (4)
- abril (3)
- marzo (6)
- febrero (5)
- enero (5)
- 2011 (62)
- diciembre (5)
- noviembre (9)
- octubre (6)
- septiembre (6)
- agosto (3)
- julio (2)
- junio (5)
- mayo (4)
- abril (2)
- marzo (5)
- febrero (7)
- enero (8)
- 2010 (1)
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..
