html - texto - polygon background css

Escalar SVG a contenedor sin máscara/recorte

Question

He intentado muchas variantes de los parámetros svg , pero no he tenido la dicha de escalar este SVG en particular.

Intento contener este SVG en un elemento contenedor que controla el tamaño del SVG.

Estoy apuntando a 500x309px.

¿Qué combinación de width , height , viewBox y preserveAspectRatio puede ayudarme a lograr esto sin tener el SVG enmascarado o recortado?

Answer 1

1. Debe tener un atributo viewBox en su elemento SVG que describa el cuadro delimitador de los contenidos que desea que estén siempre visibles. (El archivo al que enlazas no, querrás agregar uno).

2. Para hacer que su SVG llene un elemento HTML, coloque la position:relative atributo CSS position:relative (o position:absolute o position:fixed if appropriate) en su contenedor, y luego

3. Establezca la position:absolute atributo CSS position:absolute en su elemento <svg> para hacer que se siente dentro y llene su div. (Si es necesario, también aplique a la left:0; top:0; width:100%; height:100% .)

Una vez que tenga un viewBox y su tamaño de SVG correctamente, el valor predeterminado del atributo preserveAspectRatio hará lo que desee. En particular, el valor predeterminado de xMidYMid meet significa que:

• La relación de aspecto descrita por su viewBox se conservará cuando se renderice.
  En comparación, un valor de none permitiría una escala no uniforme.
• El viewBox siempre se meet con top / bottom o left / right, con ''letterboxing'' manteniendo la otra dimensión dentro.
  En comparación, un valor de slice garantiza que su viewBox llene por completo el renderizado, con la parte superior / inferior o la izquierda / derecha fuera del SVG.
• El viewBox se mantendrá vertical y horizontalmente centrado dentro de la ventana SVG.
  En comparación, un valor de xMinYMax lo mantendría en la esquina inferior izquierda, con relleno solo a la derecha o arriba.

Puedes ver esto en vivo aquí: http://jsfiddle.net/Jq3gy/2/

Intente especificar valores explícitos para preserveAspectRatio en el elemento <svg> y presione "Actualizar" para ver cómo afectan la representación.

Editar : Creé una versión simplificada del mapa de EE. UU. Con un viewBox (casi la mitad de los bytes) y la utilicé en una demostración actualizada para satisfacer sus necesidades exactas: http://jsfiddle.net/Jq3gy/5/

Answer 2

Desafortunadamente, no sé la respuesta que se aplica a SVG sin procesar, pero en Raphael.js, lo hice así:

var paper = Raphael(''#container'', your_container_width, your_container_height);
paper.setViewBox(realSvgWidth, realSvgHeight, true);

Esta técnica amplió mi SVG para que se ajuste a los límites.

Espero que esto ayude.

Answer 3

Establezca el ancho y la altura de SVG para que sean del tamaño de su contenedor y establezca preserveAspectRatio = none.

<div height="50" width="100">
  <svg preserveAspectRatio="none" viewBox="0 0 300 200"></svg>
</div>

y

$("svg").each(function(){
  this.width = this.parentNode.width;
  this.height = this.parentNode.height;
}

Eso es. Establecer CSS no es necesario.

Personalmente configuré viewBox para que sea del tamaño de los contenidos de SVG. Entonces en mi ejemplo, la imagen original que estoy cargando en mi SVG es 300x200. Se reducirá para ajustarse a un div 50x100. Pero la manipulación de viewBox es un problema aparte.