Transicion en svg no funciona bien

[lobopk2]

El asunto que estoy intentando hacer un efecto de transicion para un menu, que sea mas suavizado al abrirse, pero me parece imposible hacer nada.

Estoy intentando con lo mas basico para ver si sale algo.

tengo esto en el codigo html

Código HTML:

<!--Empieza el Grupo rojo-->                            <g id="Rojo">        
<!--Rectangulo Rojo-->            <g
          id="rojo">
        <rect
           y="446.45499"
           x="370.62024"
           height="32.067509"
           width="151.89873"
           
           style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:#ff00ff;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:31.49108315px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           x="434.04651"
           y="474.16333"
           id="text4726"><tspan
             style="stroke:none"
             x="434.04651"
             y="474.16333"
             id="tspan4730">1</tspan></text>
      </g>
<!--Acaba el rectangulo rojo-->  
 
      
        
<!--Empieza el grupo azul-->      
                            <g id="Azul">                           
<!--uno-->            <rect
      class="azul"
         y="479.52249"
         x="370.62024"
         height="32.067509"
         width="151.89873"
         id="unoz0"
         style="opacity:1;fill:#00ffff;fill-opacity:1;fill-rule:evenodd;stroke:#ff00ff;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> 
<!--dos-->            <g
         id="dosz0" class="azul" >
         
        <rect
        
           y="512.59003"
           x="370.62024"
           height="32.067509"
           width="151.89873"
           id="dos"
           style="opacity:1;fill:#00ffff;fill-opacity:1;fill-rule:evenodd;stroke:#ff00ff;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:27.25960541px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           x="437.71823"
           y="538.28668"
           id="text4734"><tspan
             style="stroke:none"
             id="tspan4736"
             x="437.71823"
             y="538.28668">2</tspan></text>
      </g>
<!--tres-->               <rect
      class="azul"
         y="545.65753"
         x="370.62024"
         height="32.067509"
         width="151.89873"
         id="tresz0"
         style="opacity:1;fill:#00ffff;fill-opacity:1;fill-rule:evenodd;stroke:#ff00ff;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1">
        <title
           >azul</title>
      </rect>     
      
<!--Termina el grupo azul-->                            </g>                            
                            
                            
      
<!--Termina el grupo Rojo-->                </g>
 

Todo lo que estoy viendo lo hacen con etiquetas <div> pero en svg usa la <g> como grupo, me imagino que es lo mismo, de todas maneras cambie la etiqueta g por div y tampoco me sale.

en el css tengo esto

Código CSS:

.azul               {display:none;}
#Rojo:hover .azul   {display:block;}
 
 
/*Le he puesto al grupo Azul una altura y no hace nada, para empezar esto ya me falla*/
.Azul               {height:1000px !important;}
 
 
 
 
/*Asi seria segun una pagina que he visto*/
#Rojo .Azul{
    height:1000px !important;
    -webkit-transition: all 3s;
    -o-transition: all 3s;
    transition: all 3s;
}
#Rojo:hover {
    height: 2000px!important;
}
 
/*No funciona nada*/
 

De momento quiero ver si sale algo aunque sea lo mas simple, pero tambien me lio un poco.

Estas intrucciones del css, las he sacado de un ejemplo de internet:

Código HTML:

<div class="TRA_CONT">
<div> <!-- Este DIV es el que se mueve -->
</div>
</div>
 

Código CSS:

/* Este estilo es el del DIV que esta dentro de div.TRA_CONT */
.TRA_CONT div{
width:10%;
height:80px;
margin-left:0%;
background:#0F0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
 
/* Estilo que se aplica al pasar por encima de la DIV con clase TRA */
.TRA_CONT:hover div{
width:20%;
margin-left:80%;
background:#F00;
}
 

bueno yo he cambiado como dije los div por las g, asi que algo deveria hacer, pero nada.
Y segui este consejo, porque al intentar hacerla transicion con el Dreamweaver CC, me diante la ventana transiciones css, solo me deja actuar sobre un elemento. Quiero decir con esto que es algo asi como, si estoy en el Rojo el rojo hace algo.

La otra instruccion de muestra de la pagina me parecio buena, porque me da a entender que dice algo asi, si estas en un div, haz esto otro en el otro div, esto es en verdad lo que queria hacer. Aunque lo que me extraño que el Dreamweaver, no me diera como esta opcion, asi que me confunde todo.
Por eso he echo ahi una mezcla diabolica creo yo.

Me podria alguien orientar sobre cual es el error? he leido bastantes cosas, pero creo que me lio.
Dire tambien que en una pagina creo que decian que era incompatible usar el display:none, pero no se si eso ha cambiado o que? tambien dire que ni usando el display:visible funciona.

Bueno a ver si esto con vuestra ayuda puedo sacarlo adelante, porque me estoy mareando con este asunto, que deveria ser facil por lo que leo, pero en mi caso es imposible. :(

[lobopk2]

alguien que me ayude? no creo que para los que saben sea algo tan dificil, o quizas que me digan donde tendria que mirar :(