Foros del Web » Creando para Internet » HTML »

Error en mapa svg donde se superponen textos (text tspan) con provincias (path)

 Estas en el tema de Error en mapa svg donde se superponen textos (text tspan) con provincias (path) en el foro de HTML en Foros del Web. Hola. Estoy haciendo un mapa de España vectorial en .svg que me he traido desde Inkscape hasta htm.l Estoy intentando hacerlo interactivo en html y ...
  #1 (permalink)  
Antiguo 29/08/2017, 04:26
Avatar de kahlito
Colaborador
  
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 8 meses
Puntos: 65
Error en mapa svg donde se superponen textos (text tspan) con provincias (path)
Hola.

Estoy haciendo un mapa de España vectorial en .svg que me he traido desde Inkscape hasta htm.l Estoy intentando hacerlo interactivo en html y css ell problema es que por ejemplo cuando creo un enlace algunos textos no salen al 100% de ancho ya que hay otra provincia que se superpone y tapa el texto sobrante de cada provincia.

El código que tengo ahora es este quitando alguno sobrate que traia inkscape, no se si me falta algo por añadir o quitar.

Código CSS: 
Ver original
  1. <style type="text/css">
  2.         /*CSS especial para adaptar el map añadiendo la clase por ejemplo la clase map*/
  3.         .map-svg{
  4.             width: 100%;            
  5.             border: 1px solid blue;         
  6.         }
  7.         svg{
  8.             height: 50vw;
  9.         }       
  10.         /*Path provincias*/
  11.         path{
  12.              stroke:#4B4B4B;
  13.              fill:#000;         
  14.         }       
  15.         path:hover{
  16.             fill:#4B4B4B;
  17.             fill-opacity:1;         
  18.         }   
  19.         a path{
  20.              fill:#000;
  21.              fill:red;       
  22.         }       
  23.         a:hover path{
  24.              fill:#000;
  25.              fill:#ffbc03;
  26.              fill:#4B4B4B;
  27.              fill-opacity:1;
  28.              fill:green; 
  29.         }       
  30.         a.current path{
  31.             fill:#ffbc03;           
  32.         }       
  33.         a.current:hover path {       
  34.            fill:#4B4B4B;
  35.            stroke: #000 !important;       
  36.         }           
  37.       /*Textos*/
  38.         text{           
  39.             font-weight: bold;
  40.         }       
  41.         tspan{
  42.             fill: #FFCF4C;
  43.             fill: #FFC34C;  
  44.             font: 8px Verdana, Helvetica, Arial, sans-serif;            
  45.         }       
  46.         tspan:hover{
  47.             fill: #E8C44C;
  48.             fill: #F8BC02;
  49.             fill:red; 
  50.         }   
  51.         a tspan{
  52.             fill:blue; 
  53.             fill: #FFC34C;
  54.             font: 8px Verdana, Helvetica, Arial, sans-serif;        
  55.         }       
  56.         a.current tspan{
  57.             fill:blue; 
  58.             fill:green;
  59.             fill:#000;
  60.         }       
  61.         a.current:hover tspan{
  62.             fill:blue;
  63.             fill:white;
  64.             fill: #FFC34C;       
  65.         }       
  66.         </style>


Código HTML: 
Ver original
  1. <svg id="svg3609" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="map-svg">  
  2.    <!-- Guipúzcoa -->   
  3.    <a class="%current49%" id="guipuzcoa_map" xlink:href="%judet49%">   
  4.    <path id="path16" d="m474.23 42.243v0.24002h-0.24-0.23999-0.24v0.24001-0.24001l-0.23999 0.24001h-0.24-0.47998v0.24002l-0.24 0.24002v0.24001 0.24002 0.24002 0.24001 0.24002h-0.23999v0.24002h-0.24-0.23999v0.24001l-0.24 0.24002h-0.23999v0.24002-0.24002l-0.24 0.24002h-0.23999v-0.24002 0.24002 0.24001h-0.24 0.24-0.24v0.24002-0.24002h-0.23999v-0.24001-0.24002h-0.23999-0.24 0.24v0.24002h-0.24 0.24v0.24001h-0.24 0.24v0.24002h-0.24v0.24002-0.48004l-0.23999 0.24002h0.23999l-0.23999 0.24002v-0.24002h-0.24l-0.23999-0.24002h0.23999l-0.23999-0.24001v-0.24002l-0.24 0.24002v0.48003l0.24 0.24002-0.24 0.48003-0.23999 0.24001v0.24002l0.23999 0.48003v0.24002 0.24002 0.24001l0.24 0.24002h0.23999v0.24002 0.24001l-0.47999 0.24002v0.24002 0.24001h-0.23999-0.24v0.24002h-0.23999l0.23999 0.24002h-0.23999l-0.23999 0.24001-0.47999 0.24002h-0.24l0.24 0.24002h-0.24v0.24001h-0.23999l-0.24 0.24002v-0.24002l-0.47999 0.24002-0.23999 0.24001v0.24002h-0.23999l0.23999 0.48003v0.24002l-0.47999 0.24002v0.24001l-0.23999 0.24002v0.48003l0.23999 0.48004v0.24001h0.24l-0.24 0.48004-0.23999 0.24001h-0.24v0.24002h-0.95998-0.47998v0.72005l-0.24 0.24001v0.24002l-0.23999 0.24002h-0.24-0.23999-0.24-0.23999-0.24l-0.23999 0.24001h-0.23999-0.24v-0.24001l-0.23999-0.24002-0.24-0.24002-0.23999 0.24002-0.24-0.24002v0.24002 0.24002 0.24001h-0.23999l-0.24 0.24002h-0.23999v0.24002 1.2001l-0.24-0.24002-0.23999 0.24002v-0.24002h-0.47999-0.47999l-0.23999-0.24001v-0.48004l-0.24-0.24001v-0.24002l-0.23999 0.24002-0.24-0.24002h-0.23999l-0.47999-0.24002-0.23999-0.24001v-0.24002h-0.24-0.23999-0.24l-0.23999-0.24002h-0.24-0.23999l-0.23999-0.24001-0.47999 0.24001-0.24-0.24001h-0.23999-0.24l-0.23999 0.24001-0.24-0.24001-0.47998-0.24002h-0.24l-0.47999 0.24002-0.95998-0.48004-0.23999 0.24002 0.23999 0.48003-0.23999 0.24002v-0.24002l-0.23999-0.24001h-0.47999l-0.24-0.24002h-0.23999v-0.24002h-0.24l-0.23999-0.24001v-0.24002h0.23999l-0.23999-0.48003v-0.24002-0.24001h0.23999 0.24l0.71998-0.48004h0.24l0.23999-0.24001v-0.24002l0.23999-0.24002 0.24-0.24001v-0.24002l-0.24-0.48003h-0.23999v-0.48004h-0.23999l0.23999-0.24001v-0.24002-0.24001h0.23999l0.24-0.24002 0.47999 0.24002 0.23999-0.24002v-0.96007h0.24l-0.24-0.72005v-0.48003-0.24002l-0.23999-0.24001v-0.24002h0.23999 0.47999v-0.24002l-0.23999-0.24001 0.23999-0.24002v-0.72005h-0.23999v-0.24001h-0.24v-0.48004l0.24-0.24001v0.24001l0.23999-0.24001 0.24 0.24001h0.47998v-0.24001l0.47999-0.48004 0.24-0.24001v-0.24002l0.47999-0.48003v-0.24002-0.24002h-0.24v-0.24001l-0.47999-0.24002 0.24-0.48003v-0.24002l0.23999-0.24001h0.24v-0.48004h0.23999 0.24l0.71998 0.48004h-0.24 0.24 0.23999l0.24 0.24001h0.23999v0.24002h0.24v-0.24002l0.71998 0.24002h0.23999 0.71999 0.23999 0.24 0.23999v-0.24002 0.24002l0.24-0.24002h0.23999 0.23999v-0.24001h0.47999 0.24l0.23999 0.24001 0.24-0.24001v0.24001l0.23999 0.24002v0.24001l0.24-0.24001 0.23999 0.24001v0.24002l0.71998-0.24002v-0.24001l0.24 0.24001h0.23999 0.24v-0.24001h0.23999l0.24-0.24002 0.71998-0.24001h0.47999v-0.24002h0.71998v-0.24002h0.24 0.47999 0.23999v-0.24001h0.23999v0.24001l0.24 0.24002 0.23999-0.24002-0.23999-0.24001h0.23999 0.24 0.23999v-0.48004h0.24 0.47999v0.24002l0.23999-0.24002h0.23999v0.24002h0.24v-0.24002h-0.24 0.47999l0.24-0.24001 0.47999-0.24002h0.23999l0.24-0.72005 0.23999-0.24002h0.23999v-0.24001h0.24 0.23999v-0.24002h0.47999l0.24-0.24002h0.23999l0.47999-0.24001 0.24 0.24001h-0.24l-0.23999 0.24002v0.24002l0.23999 0.24001v-0.24001 0.24001 0.24002l0.24 0.24002-0.24 0.24001h0.24l0.23999 0.24002 0.23999 0.24002 0.24-0.24002 0.23999 0.24002v0.24001l0.47999 0.24002v0.24002 0.24001 0.24002l0.24 0.48003m-12.48 0.48003" clip-path="url(#SVG_CP_1)" transform="translate(-112.39 -18.688)" fill=""/> 
  5.   <text id="text769" transform="scale(.99995 1)" y="33.925827" x="327.77164">
  6.    <tspan id="tspan771">Guipúzcoa</tspan>
  7.    </text>    
  8. </a>
  9.    <!-- Vizcaya -->
  10.    <a class="%current30%" id="vizcaya_map" xlink:href="%judet30%">
  11.    <path id="path44" d="m339.59 25.344-0.25 0.5h-0.25-0.25-0.21875v0.21875h-0.25l-0.25 0.5h-0.21875-0.25l-0.25-0.25v0.25h-0.46875-0.25-0.46875v-0.25h-0.25-0.21875-0.25v0.25l-0.25-0.25h-0.21875-0.25-0.25-0.21875-0.5v0.25h-0.21875v0.21875 0.25h0.21875v0.25h-0.21875v-0.25l-0.25 0.25h-0.25v0.21875l-0.46875 0.25v0.25 0.21875h-0.25-0.25v0.25h-0.21875l-0.25 0.25h-0.25l-0.21875 0.21875 0.21875 0.25 0.25 0.25v0.21875h-0.25l0.5 0.25v0.25 0.21875 0.25h-0.25-0.25l-0.21875-0.25h0.21875l-0.15625-0.0625 0.15625-0.15625h-0.21875l0.21875-0.25-0.46875 0.25-0.71875-0.25-0.25-0.25-0.46875-0.46875h-0.25l0.5-0.46875-0.71875 0.46875v0.25 0.21875l-0.25 0.25-0.25-0.25h-0.46875-0.25v0.25 0.25 0.9375 0.5l-0.21875 0.25h-0.75-0.21875l-0.25 0.21875h-0.25v0.5l-0.21875-0.25v-0.25l-0.25-0.21875v-0.5l-0.71875 0.25-0.25 0.25v0.21875h-0.21875l-0.5 0.25h-0.21875l-0.25-0.25 0.25-0.21875h-0.25-0.46875v0.21875h-0.25l-0.25-0.21875-0.46875 0.21875 0.25 0.5v0.21875l-0.5 0.25-0.46875-0.25-0.25 0.25-0.25 0.25-0.21875 0.46875v0.25l-0.25-0.25h-0.25v0.25l-0.21875 0.21875h-0.25l-0.25 0.25-0.21875-0.25-0.25 0.25 0.25 0.25v0.21875l0.21875 0.71875v0.25 1.1875l0.25 0.25v0.25l0.25 0.25v0.71875h0.21875v-0.25h0.71875l0.5-0.46875h0.25l0.21875-0.25 0.25-0.5h0.25l0.21875 0.25 0.25-0.25 0.46875-0.21875 0.25-0.25 0.46875-0.46875h0.5v-0.25l0.21875 0.25v-0.25l0.5 0.46875 0.21875 0.25v0.25h0.25v0.21875l0.25-0.21875h0.21875l0.25 0.21875h0.46875l0.25-0.21875 0.25-0.25 0.25 0.25h0.21875l0.25 0.21875v0.25h0.25v0.25h0.21875l0.25 0.46875h0.25l0.46875-0.21875h0.25l0.21875 0.21875 0.5-0.46875 0.9375-0.25v-0.25l0.25-0.46875v-0.46875-0.25l0.25-0.25v0.25h0.21875 0.71875v-0.25l0.25 0.71875 0.25 0.5 0.46875 0.21875-0.21875 0.5h0.21875l0.25 0.46875v0.25l0.25 0.25h-0.25v0.21875h-0.25l-0.21875 0.5-0.25 0.46875-0.25 0.25 0.25 0.21875 0.71875 0.5v0.21875h0.25l0.46875 0.5 0.25 0.21875 0.46875 0.5v-0.25h0.25 0.46875l0.46875 0.25h0.5l0.46875 0.46875h0.96875 0.21875l0.25 0.25h0.5 0.21875v-0.25h0.25v0.25h0.25l0.46875-0.25h0.25v0.25h0.21875l0.25 0.25 0.46875-0.25 0.25-0.25 0.25 0.25 0.46875 0.25h0.25v-0.25-0.25-0.46875h-0.25l-0.25-0.5v-0.21875h-0.21875l-0.25-0.25v-0.25l0.96875-0.46875h0.21875 0.5l0.46875 0.25 0.96875-0.25h0.25l0.21875-0.25h0.25l0.25-0.21875 0.46875 0.21875 0.25-0.21875v-0.96875h0.21875l-0.21875-0.71875v-0.46875-0.25l-0.25-0.25v-0.25h0.25 0.46875v-0.21875l-0.25-0.25 0.25-0.25v-0.71875h-0.25v-0.21875h-0.21875v-0.5l0.21875-0.21875v0.21875l0.25-0.21875 0.25 0.21875h0.46875v-0.21875l0.46875-0.5 0.25-0.21875v-0.25l0.46875-0.46875v-0.25-0.25h-0.21875v-0.21875l-0.5-0.25 0.25-0.46875v-0.25l0.25-0.25h0.21875v-0.46875-0.25l-0.46875-0.25h-0.25l-0.21875-0.21875-0.25 0.21875v-0.21875l-0.25-0.5h-0.21875v-0.21875h-0.25v-0.25h-0.25-0.21875v-0.25l-0.25-0.21875h-0.25-0.21875-0.25-0.25-0.21875v-0.25h-0.25v-0.25h-0.25-0.25-0.21875-0.25-0.25v-0.21875h-0.46875-0.25-0.21875v-0.25l-0.25-0.25v-0.21875l-0.25-0.25-0.21875 0.25h-0.25-0.25-0.21875l-0.25 0.21875h-0.25v-0.21875l-0.21875-0.25h-0.25-0.25v-0.25h-0.21875l-0.25-0.21875-0.25-0.5v-0.46875h-0.21875v-0.25zm-15.125 7.6875 0.21875 0.25 0.25 0.21875v0.5l-0.25 0.21875-0.21875 0.25-0.25 0.25 0.25 0.21875-0.25 0.25 0.25 0.46875h-0.25l-0.25 0.25-0.21875-0.25h-0.25v-0.21875l0.25-0.25-0.25-0.25v-0.21875l0.25-0.5-0.24-0.22-0.25-0.25v-0.25l0.5-0.21875h0.21875 0.25l0.25-0.25zm6.9375 2.1562 0.25 0.25v0.21875h-0.25l-0.21875-0.21875 0.21875-0.25zm-0.71875 6.9688-0.21875 0.21875v0.75l-0.96875 0.46875 0.25 0.25h0.21875v-0.25l0.25 0.25h0.25v0.21875h0.21875l0.5 0.5h0.21875l0.71875 0.21875v-0.21875l0.25-0.25h0.25v-0.46875l0.21875-0.25-0.21875-0.25h-0.25-0.25l-0.46875-0.21875h-0.25l0.25-0.5v-0.25h-0.25v-0.21875h-0.46875-0.25zm1.9375 2.1562h0.21875l0.75-0.25-0.25-0.21875v0.21875h-0.25l-0.46875 0.25z" clip-path="url(#SVG_CP_1)" transform="translate(-7.9818 -8.0336)" fill=""/>   
  12.    <text id="text757" transform="scale(.99995 1)" y="26.83588" x="312.99408">
  13.     <tspan id="tspan759">Vizcaya</tspan>
  14.     </text>
  15.   </a>
  16. </svg>


He intentado ya varias maneras, incluso buscando con z-index pero veo que aquí no se utiliza, ¿Hay algún modo en svg para que no se superpongan las provincias y textos?.
  #2 (permalink)  
Antiguo 29/08/2017, 08:34
Avatar de kahlito
Colaborador
  
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 8 meses
Puntos: 65
Respuesta: Error en mapa svg donde se superponen textos (text tspan) con provincias (
Hola de nuevo.

Después de varios días y tiempo investigando y probando creo que una opción temporal (o quizás única) podría ser poner siempre en el código html debajo la provincia que se tapa, por ejemplo en este casi pondría Vizcaya encima de Guipúzcoa y listo. Luego si a la vez esta se superpone con otra o roza moviendo las coordenadas x e y pues la desplazo para que no se superpongan y así con eso por ahora creo que me puede servir.

Ejemplo: Pongo arriba Vizcaya, muevo el texto en x un poco mas a la izquierda x="308.99408", debajo la que no se veía y listo.

Código HTML: 
Ver original
  1. <svg id="svg3609" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="map-svg">
  2. <!-- Vizcaya -->
  3.    <a class="%current30%" id="vizcaya_map" xlink:href="%judet30%">
  4.    <path id="path44" d="m339.59 25.344-0.25 0.5h-0.25-0.25-0.21875v0.21875h-0.25l-0.25 0.5h-0.21875-0.25l-0.25-0.25v0.25h-0.46875-0.25-0.46875v-0.25h-0.25-0.21875-0.25v0.25l-0.25-0.25h-0.21875-0.25-0.25-0.21875-0.5v0.25h-0.21875v0.21875 0.25h0.21875v0.25h-0.21875v-0.25l-0.25 0.25h-0.25v0.21875l-0.46875 0.25v0.25 0.21875h-0.25-0.25v0.25h-0.21875l-0.25 0.25h-0.25l-0.21875 0.21875 0.21875 0.25 0.25 0.25v0.21875h-0.25l0.5 0.25v0.25 0.21875 0.25h-0.25-0.25l-0.21875-0.25h0.21875l-0.15625-0.0625 0.15625-0.15625h-0.21875l0.21875-0.25-0.46875 0.25-0.71875-0.25-0.25-0.25-0.46875-0.46875h-0.25l0.5-0.46875-0.71875 0.46875v0.25 0.21875l-0.25 0.25-0.25-0.25h-0.46875-0.25v0.25 0.25 0.9375 0.5l-0.21875 0.25h-0.75-0.21875l-0.25 0.21875h-0.25v0.5l-0.21875-0.25v-0.25l-0.25-0.21875v-0.5l-0.71875 0.25-0.25 0.25v0.21875h-0.21875l-0.5 0.25h-0.21875l-0.25-0.25 0.25-0.21875h-0.25-0.46875v0.21875h-0.25l-0.25-0.21875-0.46875 0.21875 0.25 0.5v0.21875l-0.5 0.25-0.46875-0.25-0.25 0.25-0.25 0.25-0.21875 0.46875v0.25l-0.25-0.25h-0.25v0.25l-0.21875 0.21875h-0.25l-0.25 0.25-0.21875-0.25-0.25 0.25 0.25 0.25v0.21875l0.21875 0.71875v0.25 1.1875l0.25 0.25v0.25l0.25 0.25v0.71875h0.21875v-0.25h0.71875l0.5-0.46875h0.25l0.21875-0.25 0.25-0.5h0.25l0.21875 0.25 0.25-0.25 0.46875-0.21875 0.25-0.25 0.46875-0.46875h0.5v-0.25l0.21875 0.25v-0.25l0.5 0.46875 0.21875 0.25v0.25h0.25v0.21875l0.25-0.21875h0.21875l0.25 0.21875h0.46875l0.25-0.21875 0.25-0.25 0.25 0.25h0.21875l0.25 0.21875v0.25h0.25v0.25h0.21875l0.25 0.46875h0.25l0.46875-0.21875h0.25l0.21875 0.21875 0.5-0.46875 0.9375-0.25v-0.25l0.25-0.46875v-0.46875-0.25l0.25-0.25v0.25h0.21875 0.71875v-0.25l0.25 0.71875 0.25 0.5 0.46875 0.21875-0.21875 0.5h0.21875l0.25 0.46875v0.25l0.25 0.25h-0.25v0.21875h-0.25l-0.21875 0.5-0.25 0.46875-0.25 0.25 0.25 0.21875 0.71875 0.5v0.21875h0.25l0.46875 0.5 0.25 0.21875 0.46875 0.5v-0.25h0.25 0.46875l0.46875 0.25h0.5l0.46875 0.46875h0.96875 0.21875l0.25 0.25h0.5 0.21875v-0.25h0.25v0.25h0.25l0.46875-0.25h0.25v0.25h0.21875l0.25 0.25 0.46875-0.25 0.25-0.25 0.25 0.25 0.46875 0.25h0.25v-0.25-0.25-0.46875h-0.25l-0.25-0.5v-0.21875h-0.21875l-0.25-0.25v-0.25l0.96875-0.46875h0.21875 0.5l0.46875 0.25 0.96875-0.25h0.25l0.21875-0.25h0.25l0.25-0.21875 0.46875 0.21875 0.25-0.21875v-0.96875h0.21875l-0.21875-0.71875v-0.46875-0.25l-0.25-0.25v-0.25h0.25 0.46875v-0.21875l-0.25-0.25 0.25-0.25v-0.71875h-0.25v-0.21875h-0.21875v-0.5l0.21875-0.21875v0.21875l0.25-0.21875 0.25 0.21875h0.46875v-0.21875l0.46875-0.5 0.25-0.21875v-0.25l0.46875-0.46875v-0.25-0.25h-0.21875v-0.21875l-0.5-0.25 0.25-0.46875v-0.25l0.25-0.25h0.21875v-0.46875-0.25l-0.46875-0.25h-0.25l-0.21875-0.21875-0.25 0.21875v-0.21875l-0.25-0.5h-0.21875v-0.21875h-0.25v-0.25h-0.25-0.21875v-0.25l-0.25-0.21875h-0.25-0.21875-0.25-0.25-0.21875v-0.25h-0.25v-0.25h-0.25-0.25-0.21875-0.25-0.25v-0.21875h-0.46875-0.25-0.21875v-0.25l-0.25-0.25v-0.21875l-0.25-0.25-0.21875 0.25h-0.25-0.25-0.21875l-0.25 0.21875h-0.25v-0.21875l-0.21875-0.25h-0.25-0.25v-0.25h-0.21875l-0.25-0.21875-0.25-0.5v-0.46875h-0.21875v-0.25zm-15.125 7.6875 0.21875 0.25 0.25 0.21875v0.5l-0.25 0.21875-0.21875 0.25-0.25 0.25 0.25 0.21875-0.25 0.25 0.25 0.46875h-0.25l-0.25 0.25-0.21875-0.25h-0.25v-0.21875l0.25-0.25-0.25-0.25v-0.21875l0.25-0.5-0.24-0.22-0.25-0.25v-0.25l0.5-0.21875h0.21875 0.25l0.25-0.25zm6.9375 2.1562 0.25 0.25v0.21875h-0.25l-0.21875-0.21875 0.21875-0.25zm-0.71875 6.9688-0.21875 0.21875v0.75l-0.96875 0.46875 0.25 0.25h0.21875v-0.25l0.25 0.25h0.25v0.21875h0.21875l0.5 0.5h0.21875l0.71875 0.21875v-0.21875l0.25-0.25h0.25v-0.46875l0.21875-0.25-0.21875-0.25h-0.25-0.25l-0.46875-0.21875h-0.25l0.25-0.5v-0.25h-0.25v-0.21875h-0.46875-0.25zm1.9375 2.1562h0.21875l0.75-0.25-0.25-0.21875v0.21875h-0.25l-0.46875 0.25z" clip-path="url(#SVG_CP_1)" transform="translate(-7.9818 -8.0336)" fill=""/>   
  5.    <text id="text757" transform="scale(.99995 1)" y="26.83588" x="308.99408">
  6.     <tspan id="tspan759">Vizcaya</tspan>
  7.     </text>
  8.   </a>  
  9.        <!-- Guipúzcoa -->   
  10.        <a class="%current49%" id="guipuzcoa_map" xlink:href="%judet49%">   
  11.        <path id="path16" d="m474.23 42.243v0.24002h-0.24-0.23999-0.24v0.24001-0.24001l-0.23999 0.24001h-0.24-0.47998v0.24002l-0.24 0.24002v0.24001 0.24002 0.24002 0.24001 0.24002h-0.23999v0.24002h-0.24-0.23999v0.24001l-0.24 0.24002h-0.23999v0.24002-0.24002l-0.24 0.24002h-0.23999v-0.24002 0.24002 0.24001h-0.24 0.24-0.24v0.24002-0.24002h-0.23999v-0.24001-0.24002h-0.23999-0.24 0.24v0.24002h-0.24 0.24v0.24001h-0.24 0.24v0.24002h-0.24v0.24002-0.48004l-0.23999 0.24002h0.23999l-0.23999 0.24002v-0.24002h-0.24l-0.23999-0.24002h0.23999l-0.23999-0.24001v-0.24002l-0.24 0.24002v0.48003l0.24 0.24002-0.24 0.48003-0.23999 0.24001v0.24002l0.23999 0.48003v0.24002 0.24002 0.24001l0.24 0.24002h0.23999v0.24002 0.24001l-0.47999 0.24002v0.24002 0.24001h-0.23999-0.24v0.24002h-0.23999l0.23999 0.24002h-0.23999l-0.23999 0.24001-0.47999 0.24002h-0.24l0.24 0.24002h-0.24v0.24001h-0.23999l-0.24 0.24002v-0.24002l-0.47999 0.24002-0.23999 0.24001v0.24002h-0.23999l0.23999 0.48003v0.24002l-0.47999 0.24002v0.24001l-0.23999 0.24002v0.48003l0.23999 0.48004v0.24001h0.24l-0.24 0.48004-0.23999 0.24001h-0.24v0.24002h-0.95998-0.47998v0.72005l-0.24 0.24001v0.24002l-0.23999 0.24002h-0.24-0.23999-0.24-0.23999-0.24l-0.23999 0.24001h-0.23999-0.24v-0.24001l-0.23999-0.24002-0.24-0.24002-0.23999 0.24002-0.24-0.24002v0.24002 0.24002 0.24001h-0.23999l-0.24 0.24002h-0.23999v0.24002 1.2001l-0.24-0.24002-0.23999 0.24002v-0.24002h-0.47999-0.47999l-0.23999-0.24001v-0.48004l-0.24-0.24001v-0.24002l-0.23999 0.24002-0.24-0.24002h-0.23999l-0.47999-0.24002-0.23999-0.24001v-0.24002h-0.24-0.23999-0.24l-0.23999-0.24002h-0.24-0.23999l-0.23999-0.24001-0.47999 0.24001-0.24-0.24001h-0.23999-0.24l-0.23999 0.24001-0.24-0.24001-0.47998-0.24002h-0.24l-0.47999 0.24002-0.95998-0.48004-0.23999 0.24002 0.23999 0.48003-0.23999 0.24002v-0.24002l-0.23999-0.24001h-0.47999l-0.24-0.24002h-0.23999v-0.24002h-0.24l-0.23999-0.24001v-0.24002h0.23999l-0.23999-0.48003v-0.24002-0.24001h0.23999 0.24l0.71998-0.48004h0.24l0.23999-0.24001v-0.24002l0.23999-0.24002 0.24-0.24001v-0.24002l-0.24-0.48003h-0.23999v-0.48004h-0.23999l0.23999-0.24001v-0.24002-0.24001h0.23999l0.24-0.24002 0.47999 0.24002 0.23999-0.24002v-0.96007h0.24l-0.24-0.72005v-0.48003-0.24002l-0.23999-0.24001v-0.24002h0.23999 0.47999v-0.24002l-0.23999-0.24001 0.23999-0.24002v-0.72005h-0.23999v-0.24001h-0.24v-0.48004l0.24-0.24001v0.24001l0.23999-0.24001 0.24 0.24001h0.47998v-0.24001l0.47999-0.48004 0.24-0.24001v-0.24002l0.47999-0.48003v-0.24002-0.24002h-0.24v-0.24001l-0.47999-0.24002 0.24-0.48003v-0.24002l0.23999-0.24001h0.24v-0.48004h0.23999 0.24l0.71998 0.48004h-0.24 0.24 0.23999l0.24 0.24001h0.23999v0.24002h0.24v-0.24002l0.71998 0.24002h0.23999 0.71999 0.23999 0.24 0.23999v-0.24002 0.24002l0.24-0.24002h0.23999 0.23999v-0.24001h0.47999 0.24l0.23999 0.24001 0.24-0.24001v0.24001l0.23999 0.24002v0.24001l0.24-0.24001 0.23999 0.24001v0.24002l0.71998-0.24002v-0.24001l0.24 0.24001h0.23999 0.24v-0.24001h0.23999l0.24-0.24002 0.71998-0.24001h0.47999v-0.24002h0.71998v-0.24002h0.24 0.47999 0.23999v-0.24001h0.23999v0.24001l0.24 0.24002 0.23999-0.24002-0.23999-0.24001h0.23999 0.24 0.23999v-0.48004h0.24 0.47999v0.24002l0.23999-0.24002h0.23999v0.24002h0.24v-0.24002h-0.24 0.47999l0.24-0.24001 0.47999-0.24002h0.23999l0.24-0.72005 0.23999-0.24002h0.23999v-0.24001h0.24 0.23999v-0.24002h0.47999l0.24-0.24002h0.23999l0.47999-0.24001 0.24 0.24001h-0.24l-0.23999 0.24002v0.24002l0.23999 0.24001v-0.24001 0.24001 0.24002l0.24 0.24002-0.24 0.24001h0.24l0.23999 0.24002 0.23999 0.24002 0.24-0.24002 0.23999 0.24002v0.24001l0.47999 0.24002v0.24002 0.24001 0.24002l0.24 0.48003m-12.48 0.48003" clip-path="url(#SVG_CP_1)" transform="translate(-112.39 -18.688)" fill=""/> 
  12.       <text id="text769" transform="scale(.99995 1)" y="33.925827" x="327.77164">
  13.        <tspan id="tspan771">Guipúzcoa</tspan>
  14.        </text>    
  15.     </a>
  16.     </svg>

No se si habrá otra solución, por ahora creo que esta opción me sirve, aún así lo dejo abierto por si hay alguna otra manera de hacerlo.

Saludos.
  #3 (permalink)  
Antiguo 30/08/2017, 00:43
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: Error en mapa svg donde se superponen textos (text tspan) con provincias (
Hola kahlito:

Aunque no responde a tu pregunta, te voy a comentar lo que he hecho en mi Mapa de España SVG:

En lugar de poner el texto en las provincias, uso el atributo title (xlink:title) en el enlace, así se muestra el texto cuando se acerca el ratón.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 31/08/2017, 08:36
Avatar de kahlito
Colaborador
  
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 8 meses
Puntos: 65
Respuesta: Error en mapa svg donde se superponen textos (text tspan) con provincias (
Hola caricatos.

Pues la verdad es que entré varias veces en tu web para consultar que por cierto tiene muy buenos ejemplos sobre esto, incluso por otro lado hasta descubri <title> con esa opción dentro de un <path> pero no la había visto justo dentro de xlink, que quizás me puede servir en otro caso dentro de este mismo proyecto.

Gracias por tu aporte, me alegro de volver a leerte, saludos ;)

Etiquetas: mapa, provincias, svg, text, textos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 12:38.