Tema: Error en mapa svg donde se superponen textos (text tspan) con provincias (path)
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/08/2017, 04:26
Avatar de kahlito
kahlito
Colaborador
  
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 1 mes
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?.