0
291
VisualizaçõesCambiar el tamaño de un SVG para llenar un div
Tengo un div con un SVG dentro 
El div está delimitado por los puntos azules y el SVG por el verde. Mi código SVG dentro de mi archivo HTML:
<svg class="svg" height="500px" width="50%"> <g class="chart" transform="translate(0,0)"> <g class="state-g"> (Map here) </g> </g> </svg>Mi CSS relevante:
body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } .container { position: relative; align-content: center; padding-left: 10%; padding-right: 10%; } .svg { outline: 5px dotted blue; font: inherit; display: block; margin: auto; } svg g.chart { outline: 5px dotted green;
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Si desea que su SVG se escale automáticamente para llenar su contenedor, debe tener un atributo viewBox .
<svg class="svg" viewBox="...something..."> <g class="chart" transform="translate(0,0)"> <g class="state-g"> (Map here) </g> </g> </svg> Los valores correctos para ese viewBox dependerán de los límites del contenido de ese SVG. Verifique su archivo de mapa original:
- Si tenía un
viewBox, entonces úsalo. - Si no tenía un
viewBox, pero teníawidthyheightcableados, entonces utilícelos. Por ejemplo, si teníawidth="200px" height="350px", reemplace esos valores conviewBox="0 0 200 350". - Si no tuviera ninguno. Luego, deberá calcular los valores correctos de viewBox. Hay varias maneras de hacer eso. Consulte otras preguntas en StackOverflow para obtener algunas soluciones. O publique un enlace a su SVG y podemos decirle cuál debería ser.
·
Juan Pablo Isaza
Relatório
Responde à pergunta