Bueno pues depues de pelearme bastante, ya lo he conseguido y dejo esta informacion por si alguien le interesa.
Antes de nada dire que soy muy novato y seguramente no es la mejor manera de hacerlo o incluso el codigo se pueda aprovechar de mejor manera, pero por ahora, esto es lo mejor que puedes encontrar, ya que no encontre ninguna informacion al respecto.
Por supuesto si alguien quiere mejorarlo, optimizarlo, o conoce alguna manera mejor que lo exponga.
Dejo aqui la etiqueta svg que hay que poner en linea en el html.
Código HTML:
Ver original<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="1000"
height="800"
viewBox="0 0 1000 800.00001"
id="svg2"
version="1.1">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
transform="translate(0,-252.36216)">
<!--ROJO------------------------------------------------------------->
<rect
style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rojo"
width="308.91031"
height="94.010918"
x="145.54485"
y="352.90701" />
<!--AZUL------------------------------------------------------------->
<rect
style="opacity:1;fill:#00ffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="azul"
width="308.6713"
height="88.988068"
x="145.82274"
y="442.86813" />
<!--VERDES------------------------------------------------------------->
<rect
style="opacity:1;fill:#00ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.9520607;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
class="verde"
id="verde"
width="302.92929"
height="88.609352"
x="450.59467"
y="443.27179" />
<rect
y="527.27179"
x="455"
height="88.609352"
width="298.52396"
class="verde"
id="verde2"
style="opacity:1;fill:#00ff72;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.9520607;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<!--AMARILLO------------------------------------------------------------->
<rect
y="527.27179"
x="749.52393"
height="88.609352"
width="298.52396"
id="amarillo"
style="opacity:1;fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.9520607;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<!------------------------------------------------------------------------------------------------------>
<!--Apartir de aqui repito algunos rectangulos, para que el codigo css funcione bien--> <!------------------------------------------------------------------------------------------------------>
<!--REPETIDO VERDE2------------------------------------------------------------->
<rect
y="527.27179"
x="455"
height="88.609352"
width="298.52396"
class="verde"
id="verde2"
style="opacity:1;fill:#00ff72;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.9520607;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<!--REPETIDO PARA HACERLOS COMO OTRA CAPA------------------------------------------------>
<rect
x="450.59467"
y="443.27179"
height="88.609352"
width="298.52396"
class="verde"
id="verde3"
style="opacity:1;fill:#29c929;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4.9520607;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
y="443.37408"
x="146.3287"
height="88.988068"
width="308.6713"
id="azul2"
style="opacity:1;fill:#26d0c1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
</svg>
Dejo tambien el archivo css.
Código CSS:
Ver original/****************************MENU SVG***********************************/
/*ocultamos los elementos*/
#azul {display:none;}
#azul2 {display:none;}
.verde {display:none;}
#amarillo {display:none;}
/*Formato reducido #azul, #azul2, .verde, #amarillo {display:none;} */
/*******************************************************************************************************/
/* cuando pasa el raton por un rectangulo enciende el otro*/
#rojo:hover ~ #azul {display:block;} /*dentro del rojo habro azul*/
/*Mantengo los dos verdes abiertos*/
#azul:hover ~ #verde {display:block;} /*dentro del azul habro verde*/
#azul:hover ~ #verde2 {display:block;} /*dentro del azul habro verde2*/
/* Abro nuevos y mantengo otros abiertos*/
.verde:hover ~ #azul2 {display:block;} /*dentro del los verdes habro azul2*/
.verde:hover + #verde2 {display:block;} /*dentro del los verdes habro mantengo verde2 abierto*/
#verde2:hover ~ #verde3 {display:block;} /*dentro del verde2 habro verde3*/
#verde2:hover ~ #amarillo {display:block;} /*dentro del verde2 habro amarillo*/
/*Mantengo abiertos los verdes y el azul*/
#amarillo:hover ~ .verde {display:block;} /*dentro del amarillo mantengo verdes abierto*/
#amarillo:hover ~ #azul2 {display:block;} /*dentro del amarillo mantengo azul2 abierto*/
/*Formato reducido
#rojo:hover ~ #azul, #azul:hover ~ #verde, #azul:hover ~ #verde2, .verde:hover ~ #azul2, .verde:hover + #verde2, #verde2:hover ~ #verde3, #verde2:hover ~ #amarillo, #amarillo:hover ~ .verde, #amarillo:hover ~ #azul2 {display:block;}
*/
/*******************************************************************************************************/
/*con esto mantengo los rectangulos visibles cuando el puntero esta dentro de los rectangulos*/
#azul:hover {display:block;}
#azul2:hover {display:block;}
.verde:hover {display:block;}
#amarillo:hover {display:block;}
/*Formato reducido #azul:hover, #azul2:hover, .verde:hover, #amarillo:hover {display:block;} */
/*****************************************FIN**************************************************************/
Seguro que direis que con javascript el codigo es mas corto e incluso funcionara mejor.
El porque usar css, es proque si es el menu de navegacion de la pagina, es mejor que sea con css, ya que si alguien tuviera el javascript deshabilitado, no podria navegar por nuestras paginas.
El ejemplo es muy simple, porque solo es una prueva.
Aqui uno de los problemas que pasan, es que hay que repetir algo de codigo en el html, puesto que css, no admite seleccionar hermanos de abajo arriba, tenemos que poner en el codigo, esos hermanos copiados debajo, para que asi css, pueda señalarlos.
Esto ultimo que he dicho no se si algunos lo entenderan, pero es asi ajjajaajajajajajajaajajaj, de echo es la clave, estas duplicidades.
Yo aqui para que se vea un poco, he cogido y estas copias las puese en otro color, para que cuando se cambie de un sitio a otro se vea que aparece la copia.
Pero la idea es que esa copia sea identica, con lo cual, cuando se hiziera el cambio no se notaria que ha cambiado.
Puedes desplazarte por todo el menu y volver desde el final al principio, viendo como aparecen cuando avanzas y como desaparecen cuando retrocedes.
Esto solo tiene un inconveniente, algo que aun no he podido subsanar, que tampoco se si sera normal o si se puede arreglar.
Al pasar el raton hay que hacerlo con cierta velocidad (lo tipico vamos), pero si por ejemplo lo pasas muy lento, puede ser que algun menu no se vea. Esto me ha sido imposible saber porque pasa y como se soluciona, aun asi, si lo haces normal funciona todo bien.
Bueno, como se ve, no es que sea, lo mejor de lo mejor, pero si que es verdad que se puede hacer, que eso ya es bastante, por lo menos para mi. teniendo este ejemplo, ya se pueden añadir mas submenus y entendiendo como funciona, crear las funciones de css y el codigo html.
Espero dos cosas, que a alguien le haya servido y haber si se puede solucionar ese pequeño fallo, del movimiento del raton, de alguna manera.
