¿Cómo puedo hacer una escala svg con su contenedor padre?

Usted querrá hacer una transformación como tal:

Con JavaScript:

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

Con CSS:

#yourtarget {
  transform:scale(2.0);
  -webkit-transform:scale(2.0);
}

Envuelva su página SVG en una etiqueta de grupo como tal y selecciónela para manipular toda la página:

<svg>
  <g id="yourtarget">
    your svg page
  </g>
</svg>

Nota : Escala 1.0 es 100%

Jugando y encontrado este CSS parece contener el SVG en el navegador Chrome hasta el punto en que el contenedor es más grande que la imagen:

div.inserted-svg-logo svg { max-width:100%; }

También parece estar funcionando en FF + IE 11.

Después de unas 48 horas de investigación, terminé haciendo esto para obtener una escala proporcional:

NOTA: Este ejemplo está escrito con React. Si no está usando eso, cambie el asunto camel case de nuevo a guiones (es decir: cambie backgroundColor a background-color y cambie el estilo Object de nuevo a 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 ejemplo anterior:

VIEWBOX

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

Min-x, min-y, ancho y alto

Ie: 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 utilizas CSS para hacer el SVG 1000x1000 px pero tu viewbox es 2000x2000, verás el cuarto superior izquierdo de tu SVG.

Los dos primeros números, min-x y min-y, determinan si el SVG debe ser desplazado dentro del viewbox.

Mi SVG necesita cambiar arriba / abajo o izquierda/derecha

Examine esto: viewbox="50 50 450 450"

Los dos primeros números cambiarán su SVG a la izquierda 50px y hacia arriba 50px, y los dos segundos números son el tamaño de viewbox: 450x450 px. Si su SVG es 500x500 pero tiene algún relleno adicional, puede manipular esos números para moverlo dentro del"viewbox".

Su objetivo en este punto es cambiar uno de esos números y ver qué pasa.

También puede omitir completamente el viewbox, pero entonces su milage variará dependiendo de cualquier otra configuración que tenga en ese momento. En mi experiencia, encontrará problemas con la preservación de la relación de aspecto porque el viewbox 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

Basado en mi investigación, hay muchos aspectos diferentes configuración de ratio, pero la predeterminada se llama xMidYMid meet. Lo puse en el mío para recordármelo explícitamente. xMidYMid meet lo hace escalar proporcionalmente basado en el 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 anterior. Fíjate cómo establezco solo ancho, sin altura. Lo configuré al 100% para que llene el contenedor en el que está. Esto es lo que probablemente contribuir al máximo para responder a esta pregunta de desbordamiento de pila.

Puede cambiarlo al valor de píxel que desee, pero le recomiendo usar 100% como lo hice para aumentarlo al tamaño máximo y luego controlarlo con CSS a través del contenedor padre. Recomiendo esto porque obtendrá el control "adecuado". Puede utilizar media queries y puede controlar el tamaño sin JavaScript loco.

ESCALADO CON CSS

Mira mi código de ejemplo anterior de nuevo. Observe cómo tengo estos 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 al usuario cambiar 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 padre, y se redimensionará según lo desee.

Dejamos la altura sola y/o la establecemos en auto, y controlamos el redimensionamiento con width. Elegí el ancho porque a menudo es más significativo debido a los diseños receptivos.

Aquí hay una imagen de estos ajustes se están utilizando:

Si lees todas las soluciones en esta pregunta y aún estás confundido o no ves lo que necesitas, echa un vistazo a este enlace aquí. Me pareció muy útil:

Https://css-tricks.com/scale-svg /

Es un artículo masivo, pero analiza prácticamente todas las formas posibles de manipular un SVG, con o sin CSS. Recomiendo leerlo mientras toma casualmente un café o su elección de select liquido.