Después de 48 horas de investigación, terminé haciendo esto para obtener una escala proporcional:
NOTA: Esta muestra está escrita con React. Si no está utilizando eso, cambiar la parte posterior cosas caso camello guiones (es decir: el cambio backgroundColor
a background-color
y cambiar el estilo Object
de nuevo a una String
).
<div
style={{
backgroundColor: 'lightpink',
resize: 'horizontal',
overflow: 'hidden',
width: '1000px',
height: 'auto',
}}
>
<svg
width="100%"
viewBox="113 128 972 600"
preserveAspectRatio="xMidYMid meet"
>
<g> ... </g>
</svg>
</div>
Esto es lo que está sucediendo en el código de muestra anterior:
CAJA DE VISTA
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
min-x, min-y, ancho y alto
es decir: viewbox = "0 0 1000 1000"
Viewbox es un atributo importante porque básicamente le dice al SVG qué tamaño dibujar y dónde. Si utilizó CSS para hacer el SVG 1000x1000 px pero su cuadro de vista era 2000x2000, vería el cuarto superior izquierdo de su SVG.
Los primeros dos números, min-x y min-y, determinan si el SVG debe compensarse dentro del cuadro de vista.
Mi SVG necesita moverse arriba / abajo o izquierda / derecha
Examine esto: viewbox = "50 50 450 450"
Los primeros dos números desplazarán su SVG hacia la izquierda 50px y hacia arriba 50px, y los segundos dos números son el tamaño del cuadro de vista: 450x450 px. Si su SVG es 500x500 pero tiene algo de relleno adicional, puede manipular esos números para moverlo dentro del "cuadro de vista".
Su objetivo en este punto es cambiar uno de esos números y ver qué sucede.
También puede omitir por completo el cuadro de vista, pero luego su kilometraje variará dependiendo de cualquier otra configuración que tenga en ese momento. En mi experiencia, encontrará problemas para preservar la relación de aspecto porque el cuadro de vista ayuda a definir la relación de aspecto.
PRESERVAR LA RELACIÓN DE ASPECTO
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
Según mi investigación, hay muchas configuraciones de relación de aspecto diferentes, pero se llama a la predeterminada xMidYMid meet
. Lo puse en el mío para recordarme explícitamente. xMidYMid meet
hace que se ajuste proporcionalmente en función del punto medio X e Y. Esto significa que permanece centrado en el cuadro de vista.
ANCHURA
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width
Mira mi código de ejemplo arriba. Observe cómo configuro solo el ancho, no la altura. Lo configuré al 100% para que llene el contenedor en el que se encuentra. Esto es lo que probablemente más contribuye a responder esta pregunta de desbordamiento de pila.
Puede cambiarlo al valor de píxel que desee, pero recomendaría usar el 100% como lo hice para aumentarlo al máximo y luego controlarlo con CSS a través del contenedor principal. Recomiendo esto porque obtendrá el control "adecuado". Puede usar consultas de medios y puede controlar el tamaño sin JavaScript loco.
ESCALANDO CON CSS
Mira mi código de ejemplo arriba nuevamente. Observe cómo tengo estas propiedades:
resize: 'horizontal', // you can safely omit this
overflow: 'hidden', // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',
Esto es adicional, pero le muestra cómo permitir que el usuario cambie el tamaño del SVG mientras mantiene la relación de aspecto adecuada. Debido a que el SVG mantiene su propia relación de aspecto, solo necesita hacer que el ancho sea redimensionable en el contenedor principal, y cambiará de tamaño según lo desee.
Dejamos solo la altura y / o la configuramos en auto, y controlamos el cambio de tamaño con el ancho. Elegí el ancho porque a menudo es más significativo debido a los diseños receptivos.
Aquí hay una imagen de estas configuraciones en uso:
Si lees todas las soluciones en esta pregunta y aún estás confundido o no ves lo que necesitas, mira este enlace aquí. Lo encontré muy útil:
https://css-tricks.com/scale-svg/
Es un artículo masivo, pero desglosa casi todas las formas posibles de manipular un SVG, con o sin CSS. Recomiendo leerlo mientras bebe un café de manera informal o elige líquidos seleccionados.