html - español - ¿Cómo puedo hacer una escala svg con su contenedor principal?

svg responsive bootstrap

Question

Quiero tener una escala de contenido de elemento svg en línea cuando el tamaño no es nativo. Por supuesto, podría tenerlo como un archivo separado y escalarlo así.

index.html: <img src="foo.svg" style="width: 100%;" /> <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

Sin embargo, quiero agregar estilos adicionales al SVG a través de CSS, por lo que vincular uno externo no es una opción. ¿Cómo hago una escala SVG en línea?

Answer 1

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

NOTA: Esta muestra está escrita con Reaccionar. Si no está utilizando eso, cambie las cosas de la caja de camello a guiones (es decir: cambie backgroundColor por background-color y cambie el estilo Object 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:

VIEWBOX

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 crear SVG 1000x1000 px pero su viewbox era 2000x2000, vería el cuarto superior izquierdo de su SVG.

Los dos primeros números, min-x y min-y, determinan si el SVG debe estar desplazado dentro de la casilla de vista.

Mi SVG necesita desplazarse hacia arriba / abajo o hacia la izquierda / derecha

Examine esto: viewbox = "50 50 450 450"

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

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

También puede omitir por completo la vista, pero su kilometraje variará dependiendo de cada otra configuración que tenga en ese momento. En mi experiencia, encontrará problemas con la preservación de la relación de aspecto porque la 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 diferentes de relación de aspecto, pero la predeterminada se llama xMidYMid meet . Lo puse en el mío para recordarme explícitamente a mí mismo. xMidYMid meet hace que se base proporcionalmente en el punto medio X e Y. Esto significa que permanece centrado en la vista.

ANCHURA

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

Mira mi código de ejemplo de arriba. Observe cómo configuro solo el ancho, no la altura. Lo configuro al 100% para que llene el contenedor en el que se encuentra. Esto es lo que probablemente contribuya más a responder esta pregunta sobre el Desbordamiento de pila.

Puede cambiarlo por el valor de píxel que desee, pero le recomendaría usar el 100% como lo hice para hacerla explotar hasta el tamaño máximo y luego controlarlo con CSS a través del contenedor principal. Recomiendo esto porque obtendrás el control "apropiado". Puede usar consultas de medios y puede controlar el tamaño sin JavaScript loco.

ESCALA CON CSS

Mira mi código de ejemplo arriba de nuevo. 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 al usuario cambiar el tamaño del SVG manteniendo la relación de aspecto adecuada. Debido a que SVG mantiene su propia relación de aspecto, solo necesita hacer que el ancho se pueda cambiar de tamaño en el contenedor principal, y cambiará de tamaño según lo desee.

Dejamos sola la altura y / o la configuramos en automático, y controlamos el cambio de tamaño con el ancho. Elegí el ancho porque a menudo es más significativo debido a diseños receptivos.

Aquí hay una imagen de estas configuraciones utilizadas:

Si lees todas las soluciones en esta pregunta y todavía estás confundido o no ves lo que necesitas, revisa este enlace aquí. Lo encontré muy útil:

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

Es un artículo enorme, pero se descompone en casi todas las formas posibles para manipular un SVG, con CSS o sin él. Recomiendo leerlo mientras tomo un café casualmente o elige los líquidos que elija.

Answer 2

Para especificar las coordenadas dentro de la imagen SVG independientemente del tamaño escalado de la imagen, use el atributo viewBox en el elemento SVG para definir qué es el cuadro delimitador de la imagen en el sistema de coordenadas de la imagen y use los atributos de width y height para definir el ancho o la altura con respecto a la página que lo contiene.

Por ejemplo, si tiene lo siguiente:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Se renderizará como un triángulo de 10px por 20px:

Ahora, si establece solo el ancho y alto, eso cambiará el tamaño del elemento SVG, pero no escalará el triángulo:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Si configura el cuadro de vista, eso hace que se transforme la imagen de forma que el cuadro dado (en el sistema de coordenadas de la imagen) se amplíe para ajustarse dentro del ancho y alto dados (en el sistema de coordenadas de la página). Por ejemplo, para escalar el triángulo de 100px por 50px:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Si quiere escalarlo hasta el ancho de la ventana HTML:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Tenga en cuenta que, de forma predeterminada, se conserva la relación de aspecto. Por lo tanto, si especifica que el elemento debe tener un ancho del 100%, pero una altura de 50 píxeles, en realidad solo se ampliará hasta la altura de 50 píxeles (a menos que tenga una ventana muy estrecha):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Si realmente desea que se extienda horizontalmente, desactive la preservación de relación de aspecto con preserveAspectRatio=none :

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

(Tenga en cuenta que, si bien en mis ejemplos utilizo la sintaxis que funciona para la incrustación de HTML, para incluir los ejemplos como una imagen en , en cambio estoy incrustado en otro SVG, por lo que necesito usar una sintaxis XML válida)

Answer 3

Perdiendo el tiempo y encontré que este CSS parece contener el SVG en el navegador Chrome hasta el punto donde 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.

Answer 4

Querrás 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 apunte a ella para manipular toda la página:

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

Nota : Scale 1.0 es 100%