1

Estoy haciendo cambios en mi web y me dieron unos íconos, que para realizar animaciones pequeñas las he exportado como svg, pero al momento de ponerlos en la web, sólo 2 mantienen el tamaño correcto:

/*Inicio barra header.*/

#menu_opaco {
  width: 100vw;
  background-color: #39404A;
  height: 10vh;
  position: absolute;
}

#contenedor_logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100vw;
  height: 10vh;
  top: 50%;
}


/*Final barra header.*/


/*Inicio contenedor de logos.*/

.contenedor_otros {
  width: 50%;
  margin-left: 32%;
  margin-top: 1%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.contenedor_otros a {
  position: relative;
  margin-right: 50px;
}

#logo_sena,
#logo_grupo,
#logo_sennova {
  margin: auto;
  max-width: 60%;
}

#logo_sennova {
  position: relative;
  left: -50%;
}

.contenedor_otros a .enlaces_logos {
  position: relative;
  width: 100%;
}

.reiniciar_pagina {
  max-width: 20%;
}

#isologo {
  position: absolute;
  left: 5%;
  top: 1%;
  max-width: 7%;
  margin-top: auto;
  margin-bottom: auto;
}


/*Inicio contenedor de logos.*/


/*Inicio contenedor de botones y manual del header.*/

.botones_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 1%;
  right: 2%;
  width: 25%;
}

.opcionHeader,
.opcionHeader a {
  color: #FFFFFF;
  cursor: pointer;
  transition: .5s all;
  margin-right: 5%;
}

.opcionHeader a:hover {
  text-decoration: none;
}

.opcionHeader .iconoOpcion svg {
  stroke: #FFFFFF;
  transition: .5s all;
}

.opcionHeader:hover .iconoOpcion svg,
.opcionHeader:hover .nombreOpcion {
  stroke: #FF6B00;
  color: #FF6B00;
  transition: .5s all;
}

.opcionHeader .iconoOpcion {
  max-width: 80%;
  margin: auto;
  transition: .5s all;
}


/*Final contenedor de botones y manual del header.*/


/*Final contenedor del header.*/
<!--Inicio cabecera de la página.-->
<header>

  <div id="menu_opaco"></div>
  <!--Barra opaca que contiene los links de logos.-->

  <div id="contenedor_logos">

    <a href="" class="reiniciar_pagina"><img src="" class="enlaces_logos" id="isologo"></a>

    <div class="contenedor_otros">

      <a href=""><img src="" alt="" class="enlaces_logos" id="logo_sena"></a>

      <a href=""><img src="" alt="" id="logo_grupo"></a>

      <a href=""><img src="" alt="" class="enlaces_logos" id="logo_sennova"></a>

    </div>

  </div>

  <div class="botones_header">

    <div class="opcionHeader inicioSesion">

      <div class="iconoOpcion">

        <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 468.13 433.29"><defs><style>.cls-1,.cls-2{fill:none; stroke-miterlimit:10;stroke-width:10px;}.cls-2{stroke-linecap:round;}</style></defs><path class="cls-1" d="M18.42,317.18c-6.67,12.45-.37,28.82,14.07,36.55s31.56,3.91,38.23-8.54Z" transform="translate(-6.87 -4.58)"/><path class="cls-1" d="M460.74,317.18c6.67,12.45.37,28.82-14.07,36.55s-31.56,3.91-38.23-8.54Z" transform="translate(-6.87 -4.58)"/><path class="cls-1" d="M328.5,215.54l84.67,146.64c18.13,31.42-4.54,70.69-40.81,70.69H106.24c-36.27,0-58.94-39.27-40.8-70.69l83.61-144.82a40,40,0,0,1,34.31-20,173.36,173.36,0,0,0,64.12,8.56A172.5,172.5,0,0,0,295,196.4C298.44,196.37,306.16,196.77,328.5,215.54Z" transform="translate(-6.87 -4.58)"/><circle class="cls-1" cx="234.06" cy="90.08" r="85.08"/><path class="cls-2" d="M142.77,219s-130.9,52.35-130.9,78.53S77.32,341.6,77.32,341.6" transform="translate(-6.87 -4.58)"/><path class="cls-2" d="M339.11,219S470,271.36,470,297.54s-65.45,44.06-65.45,44.06" transform="translate(-6.87 -4.58)"/></svg>

      </div>

      <div class="nombreOpcion">Iniciar Sesión</div>

    </div>

    <div class="opcionHeader">

      <a href="registro/">

        <div class="iconoOpcion">

          <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 481.41 435.61"><defs><style>.cls-1{fill:none;stroke-miterlimit:10;stroke-width:10px;}</style></defs><path class="cls-1" d="M133.34,25A78.84,78.84,0,1,0,25.63,140.19Z" transform="translate(-0.14 -3.26)"/><rect class="cls-1" x="37.55" y="91.11" width="151.38" height="50.46" rx="0.94" transform="translate(-49.22 116.32) rotate(-46.92)"/><path class="cls-1" d="M172.72,108.83H321a1.57,1.57,0,0,1,1.57,1.57V373.74a0,0,0,0,1,0,0H171.15a0,0,0,0,1,0,0V110.4a1.57,1.57,0,0,1,1.57-1.57Z" transform="translate(-98.13 253.5) rotate(-46.92)"/><path class="cls-1" d="M418.92,302.89,318.63,410.14a1,1,0,0,0,.56,1.64L479.9,438.36A1,1,0,0,0,481,437L420.54,303.16A1,1,0,0,0,418.92,302.89Z" transform="translate(-0.14 -3.26)"/></svg>

        </div>

        <div class="nombreOpcion">Registrarse</div>

      </a>

    </div>

    <div class="opcionHeader">

      <div class="iconoOpcion">

        <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.52 442.81"><defs><style>.cls-1{fill:none;stroke-miterlimit:10;stroke-width:10px;}</style></defs><path class="cls-1" d="M377.78,322.58a98.22,98.22,0,1,0,0-196.44Z" transform="translate(-3.48 -2.96)"/><path class="cls-1" d="M63.49,173.28a55,55,0,1,0,0,110Z" transform="translate(-3.48 -2.96)"/><path class="cls-1" d="M326.45,331.45,150.4,433.1c-37.72,21.77-84.86-5.45-84.86-49V64.61c0-43.55,47.14-70.77,84.86-49L324.27,116a48.07,48.07,0,0,1,24,41.2l1.14,134.06A46,46,0,0,1,326.45,331.45Z" transform="translate(-3.48 -2.96)"/></svg>

      </div>

      <div class="nombreOpcion">Activar Voz</div>

    </div>

    <div class="opcionHeader">

      <a href="documentos/manual_valtec.pdf" download="Manual ValTec.pdf">

        <div class="iconoOpcion">

          <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 287.52 366.31"><defs><style>.cls-1{fill:none;stroke-miterlimit:10;stroke-width:10px;}</style></defs><path class="cls-1" d="M252.49,371.61H64A44.51,44.51,0,0,1,19.48,327.1V60.91A44.52,44.52,0,0,1,64,16.39H198.65l-1.56,88.81C230.4,71.9,297,82.11,297,82.11v245A44.51,44.51,0,0,1,252.49,371.61Z" transform="translate(-14.48 -10.31)"/><path class="cls-1" d="M297,83s0-77.71-133.21-66.61" transform="translate(-14.48 -10.31)"/><line class="cls-1" x1="53.1" y1="150.39" x2="230.71" y2="150.39"/><line class="cls-1" x1="53.1" y1="194.8" x2="230.71" y2="194.8"/><line class="cls-1" x1="53.1" y1="250.3" x2="230.71" y2="250.3"/></svg>

        </div>

        <div class="nombreOpcion">Descargar Manual</div>

      </a>

    </div>

  </div>

</header>
<!--Final cabecera de la página.-->

Por favor, si alguien pudiera ayudarme sólo a ajustar los tamaños, lo agradecería.

1
  • Ya probaste insertar los svg en una etiqueta img y desde CSS tratar de modificarla?
    – user128299
    Commented el 4 abr. 2020 a las 22:47

1 respuesta 1

1

Varias cosas:

  1. Tienes el mismo id ="Capa_1" repetido 4 veces. Ya que no los necesitas en este ejemplo los he borrado. Si creas que los necesitas por favor utiliza algo como: Capa_1, Capa_2... etc

  2. Tienes un contenedor flex cuyos ítems no tienen una anchura. Para areglarlo he añadido .opcionHeader{flex:0 0 25%;}

  3. Lo importante: Para arreglar lo del tamaño tienes que utilizar elementos svg cuyo viewBox tiene la misma razón de aspecto (aspect ratio). He optado por crear unos elementos svg cuadrados.

Por ejemplo en el caso del último elemento svg tu tienes viewBox="0 0 287.52 366.31" lo que te da un elemento svg más alto (366.31) que ancho (287.52). Para transformarlo en un cuadrado podrías utilizar viewBox="0 0 366.31 366.31". Sin embargo en este caso la imagen aparecería a la izquierda. Para centrarlo he modificado el componente x del viewBox así que ahora utilizo viewBox="-42 0 370 370"

Observación: He añadido un outline a los elementos svg para que los pueda ver claramente. Puedes borrarlo.

/*Inicio barra header.*/
*{margin:0; padding:0;}
svg{outline:1px solid white;}

#menu_opaco {
  width: 100vw;
  background-color: #39404A;
  height: 100vh;
  position: absolute;
}

#contenedor_logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  position: relative;
  width: 100vw;
  height: 10vh;
  top: 50%;
}


/*Final barra header.*/


/*Inicio contenedor de logos.*/

.contenedor_otros {
  width: 50%;
  margin-left: 32%;
  margin-top: 1%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.contenedor_otros a {
  position: relative;
  margin-right: 50px;
}

#logo_sena,
#logo_grupo,
#logo_sennova {
  margin: auto;
  max-width: 60%;
}

#logo_sennova {
  position: relative;
  left: -50%;
}

.contenedor_otros a .enlaces_logos {
  position: relative;
  width: 100%;
}

.reiniciar_pagina {
  max-width: 20%;
}

#isologo {
  position: absolute;
  left: 5%;
  top: 1%;
  max-width: 7%;
  margin-top: auto;
  margin-bottom: auto;
}


/*Inicio contenedor de logos.*/


/*Inicio contenedor de botones y manual del header.*/

.botones_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 1%;
  right: 2%;
  /*width: 25%;*/
}

.opcionHeader{
  color: #FFFFFF;
  cursor: pointer;
  transition: .5s all;
  margin:0;padding:0;
  flex:0 0 25%;
}

.opcionHeader a:hover {
  text-decoration: none;
}

.opcionHeader .iconoOpcion svg {
  stroke: #FFFFFF;
  transition: .5s all;
}

.opcionHeader:hover .iconoOpcion svg,
.opcionHeader:hover .nombreOpcion {
  stroke: #FF6B00;
  color: #FF6B00;
  transition: .5s all;
}

.opcionHeader .iconoOpcion {
  max-width: 80%;
  margin: auto;
  transition: .5s all;
}


/*Final contenedor de botones y manual del header.*/


/*Final contenedor del header.*/
<!--Inicio cabecera de la página.-->
<header>

  <div id="menu_opaco"></div>
  <!--Barra opaca que contiene los links de logos.-->

  <div id="contenedor_logos">

    <a href="" class="reiniciar_pagina"><img src="" class="enlaces_logos" id="isologo"></a>

    <div class="contenedor_otros">

      <a href=""><img src="" alt="" class="enlaces_logos" id="logo_sena"></a>

      <a href=""><img src="" alt="" id="logo_grupo"></a>

      <a href=""><img src="" alt="" class="enlaces_logos" id="logo_sennova"></a>

    </div>

  </div>

  <div class="botones_header">

    <div class="opcionHeader inicioSesion">

      <div class="iconoOpcion">

        <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 470 470"><defs><style>.cls-1,.cls-2{fill:none; stroke-miterlimit:10;stroke-width:10px;}.cls-2{stroke-linecap:round;}</style></defs><path class="cls-1" d="M18.42,317.18c-6.67,12.45-.37,28.82,14.07,36.55s31.56,3.91,38.23-8.54Z" transform="translate(-6.87 -4.58)"/><path class="cls-1" d="M460.74,317.18c6.67,12.45.37,28.82-14.07,36.55s-31.56,3.91-38.23-8.54Z" transform="translate(-6.87 -4.58)"/><path class="cls-1" d="M328.5,215.54l84.67,146.64c18.13,31.42-4.54,70.69-40.81,70.69H106.24c-36.27,0-58.94-39.27-40.8-70.69l83.61-144.82a40,40,0,0,1,34.31-20,173.36,173.36,0,0,0,64.12,8.56A172.5,172.5,0,0,0,295,196.4C298.44,196.37,306.16,196.77,328.5,215.54Z" transform="translate(-6.87 -4.58)"/><circle class="cls-1" cx="234.06" cy="90.08" r="85.08"/><path class="cls-2" d="M142.77,219s-130.9,52.35-130.9,78.53S77.32,341.6,77.32,341.6" transform="translate(-6.87 -4.58)"/><path class="cls-2" d="M339.11,219S470,271.36,470,297.54s-65.45,44.06-65.45,44.06" transform="translate(-6.87 -4.58)"/></svg>

      </div>

      <div class="nombreOpcion">Iniciar Sesión</div>

    </div>

    <div class="opcionHeader">

      <a href="registro/">

        <div class="iconoOpcion">

          <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 482 482"><defs><style>.cls-1{fill:none;stroke-miterlimit:10;stroke-width:10px;}</style></defs><path class="cls-1" d="M133.34,25A78.84,78.84,0,1,0,25.63,140.19Z" transform="translate(-0.14 -3.26)"/><rect class="cls-1" x="37.55" y="91.11" width="151.38" height="50.46" rx="0.94" transform="translate(-49.22 116.32) rotate(-46.92)"/><path class="cls-1" d="M172.72,108.83H321a1.57,1.57,0,0,1,1.57,1.57V373.74a0,0,0,0,1,0,0H171.15a0,0,0,0,1,0,0V110.4a1.57,1.57,0,0,1,1.57-1.57Z" transform="translate(-98.13 253.5) rotate(-46.92)"/><path class="cls-1" d="M418.92,302.89,318.63,410.14a1,1,0,0,0,.56,1.64L479.9,438.36A1,1,0,0,0,481,437L420.54,303.16A1,1,0,0,0,418.92,302.89Z" transform="translate(-0.14 -3.26)"/></svg>

        </div>

        <div class="nombreOpcion">Registrarse</div>

      </a>

    </div>

    <div class="opcionHeader">

      <div class="iconoOpcion">

        <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 480 480"><defs><style>.cls-1{fill:none;stroke-miterlimit:10;stroke-width:10px;}</style></defs><path class="cls-1" d="M377.78,322.58a98.22,98.22,0,1,0,0-196.44Z" transform="translate(-3.48 -2.96)"/><path class="cls-1" d="M63.49,173.28a55,55,0,1,0,0,110Z" transform="translate(-3.48 -2.96)"/><path class="cls-1" d="M326.45,331.45,150.4,433.1c-37.72,21.77-84.86-5.45-84.86-49V64.61c0-43.55,47.14-70.77,84.86-49L324.27,116a48.07,48.07,0,0,1,24,41.2l1.14,134.06A46,46,0,0,1,326.45,331.45Z" transform="translate(-3.48 -2.96)"/></svg>

      </div>

      <div class="nombreOpcion">Activar Voz</div>

    </div>

    <div class="opcionHeader">

      <a href="documentos/manual_valtec.pdf" download="Manual ValTec.pdf">

        <div class="iconoOpcion">

          <svg  xmlns="http://www.w3.org/2000/svg" viewBox="-42 0 370 370"><defs><style>.cls-1{fill:none;stroke-miterlimit:10;stroke-width:10px;}</style></defs><path class="cls-1" d="M252.49,371.61H64A44.51,44.51,0,0,1,19.48,327.1V60.91A44.52,44.52,0,0,1,64,16.39H198.65l-1.56,88.81C230.4,71.9,297,82.11,297,82.11v245A44.51,44.51,0,0,1,252.49,371.61Z" transform="translate(-14.48 -10.31)"/><path class="cls-1" d="M297,83s0-77.71-133.21-66.61" transform="translate(-14.48 -10.31)"/><line class="cls-1" x1="53.1" y1="150.39" x2="230.71" y2="150.39"/><line class="cls-1" x1="53.1" y1="194.8" x2="230.71" y2="194.8"/><line class="cls-1" x1="53.1" y1="250.3" x2="230.71" y2="250.3"/></svg>

        </div>

        <div class="nombreOpcion">Descargar Manual</div>

      </a>

    </div>

  </div>

</header>
<!--Final cabecera de la página.-->

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.