1

Estoy tratando de cambiar el tamaño (alto y ancho) de un svg con css pero al hacerlo, la imagen se ve cortada. Lo que necesito es reducir su tamaño a 50px.

introducir la descripción de la imagen aquí

Le di un width y height de 50px pero esto eso es lo que se ve.

Esta es la estructura html del botón (si agrego 50 en lugarr del 94 que tiene el svg, se ve igualmente cortada):

 button {
   width: 120px;
   height: 120px;
   padding: 0;
   display: block;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
}

svg {
    margin: 0 auto;
    width: 50px;
    height: 50px;
} 
<button>
    <span class="sr-only">Play video</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="94" height="94">
          <path fill="#FAF9F7" d="M47 0C21.084 0 0 21.084 0 47s21.084 47 47 47 47-21.084 47-47S72.916 0 47 0zm24.326 48.816L37.41 72.723a1.51 1.51 0 0 1-.868.277c-.247 0-.495-.06-.72-.185A1.6 1.6 0 0 1 35 71.406V23.594a1.6 1.6 0 0 1 .822-1.41 1.5 1.5 0 0 1 1.59.093l33.916 23.906c.42.297.672.79.672 1.317 0 .527-.253 1.02-.674 1.316z"/>
    </svg>
</button>

2
  • 1
    Hola generalmente basta con asignar un atributo ej: height : 50px y el complementario (en este caso width) a auto svg { margin: 0 auto; width: 50px; height: auto; } Eso garantiza que la imagen no se deforme. En cuanto al recorte, debe haber algún otro atributo o asignación que lo provoca. Ha debido deformarse si no era cuadrada.
    – quevedo
    Commented el 14 oct. 2020 a las 0:10
  • 1
    Acabo de ver que en el html tienes width="94" height="94" eso seguramente incide en el recorte. Prueba a quitarlos y deja solo el css
    – quevedo
    Commented el 14 oct. 2020 a las 0:17

2 respuestas 2

3

El error tiene que ver con el atributo viewBox más info Mdn

<button>
    <span class="sr-only">Play video</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="94" height="94" viewBox="0 0 94 94">introducir el código aquí
          <path fill="#FAF9F7" d="M47 0C21.084 0 0 21.084 0 47s21.084 47 47 47 47-21.084 47-47S72.916 0 47 0zm24.326 48.816L37.41 72.723a1.51 1.51 0 0 1-.868.277c-.247 0-.495-.06-.72-.185A1.6 1.6 0 0 1 35 71.406V23.594a1.6 1.6 0 0 1 .822-1.41 1.5 1.5 0 0 1 1.59.093l33.916 23.906c.42.297.672.79.672 1.317 0 .527-.253 1.02-.674 1.316z"/>
    </svg>
</button>

1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 6 may. 2022 a las 12:26
2

Lo que yo te aconsejaría es que si quieres mantener bien la relación aspecto trabajes con lo siguiente:

svg {
    margin: 0 auto;
    transform: scale(.5);
} 

O bien con porcentajes.

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.