es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo cambiar el ancho y alto de este SVG sin romperlo?

06 Aug, 2023 Programación

Tengo este SVG y quiero hacerlo más grande en altura o/y anchura, pero que se vea exactamente igual en consistencia:

<svg width="104" height="102" xmlns="http://www.w3.org/2000/svg">
  <path d="M104 102V59.727H84.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C95.01 25.86 98.909 22.257 104 19.375V0c-9.758 4.27-17.712 9.874-23.864 16.813-6.151 6.939-10.712 14.545-13.681 22.818C63.485 47.904 62 59.941 62 75.74V102h42zm-62 0V59.727H22.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C33.01 25.86 36.909 22.257 42 19.375V0c-9.652 4.27-17.58 9.874-23.784 16.813C12.01 23.752 7.424 31.358 4.455 39.631 1.485 47.904 0 59.941 0 75.74V102h42z" fill="#A775F1" fill-rule="nonzero"></path>
</svg>

Y no hace ninguna diferencia en el tamaño si hago el ancho y la altura con un número mayor (de 104×102 a 416×408):

<svg width="416" height="408" xmlns="http://www.w3.org/2000/svg">
  <path d="M104 102V59.727H84.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C95.01 25.86 98.909 22.257 104 19.375V0c-9.758 4.27-17.712 9.874-23.864 16.813-6.151 6.939-10.712 14.545-13.681 22.818C63.485 47.904 62 59.941 62 75.74V102h42zm-62 0V59.727H22.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C33.01 25.86 36.909 22.257 42 19.375V0c-9.652 4.27-17.58 9.874-23.784 16.813C12.01 23.752 7.424 31.358 4.455 39.631 1.485 47.904 0 59.941 0 75.74V102h42z" fill="#A775F1" fill-rule="nonzero"></path>
</svg>

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el SVG sea más grande en altura y/o anchura mientras se mantiene su consistencia, puedes usar CSS para escalar el SVG proporcionalmente. Puedes agregar una clase al elemento SVG y definir la anchura y altura deseadas, luego agregar la propiedad CSS transform con un valor de escala para ajustar el tamaño. Por ejemplo:

    <svg class="mi-svg" width="104" height="102" xmlns="http://www.w3.org/2000/svg">
  <path d="M104 102V59.727H84.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C95.01 25.86 98.909 22.257 104 19.375V0c-9.758 4.27-17.712 9.874-23.864 16.813-6.151 6.939-10.712 14.545-13.681 22.818C63.485 47.904 62 59.941 62 75.74V102h42zm-62 0V59.727H22.114c0-5.871.689-11.182 2.068-15.933 1.379-4.75 3.42-9.287 6.125-13.61C33.01 25.86 36.909 22.257 42 19.375V0c-9.652 4.27-17.58 9.874-23.784 16.813C12.01 23.752 7.424 31.358 4.455 39.631 1.485 47.904 0 59.941 0 75.74V102h42z" fill="#A775F1" fill-rule="nonzero"/>
</svg>


    .mi-svg {
    width: 416px;
    height: 408px;
    transform: scale(4);
    transform-origin: 0 0;
}

    En el código CSS, el valor de escala de transformación de 4 aumentará el SVG a cuatro veces su tamaño original manteniendo su relación de aspecto, y la propiedad transform-origin establece la esquina superior izquierda del SVG como punto de referencia de escala. Ajusta el valor de escala según sea necesario para redimensionar el SVG a las dimensiones deseadas.

Comments are closed.