0
290
ViewsResizing an SVG to fill a div
I have a div with an SVG inside of it
The div is outlines by the blue dots and the SVG by the green. My SVG code inside of my HTML file:
<svg class="svg" height="500px" width="50%">
<g class="chart" transform="translate(0,0)">
<g class="state-g"> (Map here) </g>
</g>
</svg>
My relevant CSS:
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 answers
Answer question0
If you want your SVG to automatically scale to fill its container then it needs to have a viewBox attribute.
<svg class="svg" viewBox="...something...">
<g class="chart" transform="translate(0,0)">
<g class="state-g"> (Map here) </g>
</g>
</svg>
The correct values for that viewBox will depend on the bounds of the content of that SVG. Check your original map file:
- If it had a
viewBox, then use that. - If it didn't have a
viewBox, but it had hardwiredwidthandheight, then use those. For instance, if it hadwidth="200px" height="350px", then replace those values withviewBox="0 0 200 350". - If it had neither. Then you will need to work out the correct viewBox values. There are several ways to do that. Check other questions on StackOverflow for some solutions. Or post a link to your SVG and we can tell you what it should be.
·
Juan Pablo Isaza
Report
Answer question