24
Me gustaría incrustar SVG en una página HTML de forma tal que se cambia el tamaño automáticamente (usando SVG, CSS o JS) cuando se cambia el tamaño de la página, conservando la relación de aspecto original.Ajustando la escala de un SVG incrustado en HTML en el tamaño de la ventana
Por ejemplo, usando un ejemplo de W3Schools:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
¿Es posible establecer la anchura SVG = 5% de la anchura de la ventana, y tienen la altura escalado proporcionalmente?
He intentado un par de cosas incluyendo preserveAspectRatio="xMinYMin meet" y estableciendo las dimensiones al 100% dentro de un contenedor <div>, pero todavía no lo he conseguido.
¿Alguna sugerencia?
Eso hizo el truco. ¿Sabes cómo se manejan los dos últimos parámetros para viewBox? Aumentarlos parece * disminuir * el tamaño de la imagen. –
Esos números son el ancho y la altura usados de su imagen. En su ejemplo anterior, circularía + radio: cx + r = ancho (140) y cy + r = alto (90). Su mejor opción sería guardar la imagen a través de un software de gráficos como Inkscape, que calculará los tamaños generales y escribirá el atributo viewBox en el archivo. Si usa Inkscape, asegúrese de seleccionar "Optimized Inkscape SVG", que dará como resultado un tamaño de archivo mucho más pequeño y un código fuente XML comprensible. – feeela
¡Esta respuesta me salvó el día! – qed