Resizing an SVG to fill a div-CodePudding

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;

CodePudding user response：

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 hardwired width and height, then use those. For instance, if it had width="200px" height="350px", then replace those values with viewBox="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.

CodePudding user response：

Try to set width and height to 100% in the tag where your is (Map here). For example i using <rect/>.

rect {
  width: 100%;
  height: 100%;
  fill: green;
}

Show code snippet

const btn = document.querySelector('#resize');
const btn2 = document.querySelector('#rem-pad');
const svg = document.querySelector('svg');
const container = document.querySelector('.container');
btn.addEventListener('click', () => {
  svg.classList.toggle('fill');
});
btn2.addEventListener('click', () => {
  container.classList.toggle('rem-pad');
});

body,
html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  /* extra properties */
  background-color: hsl(201, 27%, 10%);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.container {
  position: relative;
  align-content: center;
  padding-left: 10%;
  padding-right: 10%;
  outline: 5px dotted red;
  margin-top: 10px;
  /* new line */
}

.svg {
  outline: 5px dotted blue;
  font: inherit;
  display: block;
  margin: auto;
}

svg g.chart {
  outline: 5px dotted green;
}


/* new classes */

.fill {
  width: 100%;
}

.container.rem-pad {
  padding-left: 0;
  padding-right: 0;
}

rect {
  width: 100%;
  height: 100%;
  fill: green;
}

.btns {
  display: flex;
}

button {
  padding: 1rem 2rem;
  background: green;
}

<div class="container">
  <svg class="svg fill" height="180px" width="50%">
     <g class="chart" transform="translate(0,0)">
       <g class="state-g">
         <rect x="0" y="0" />
       </g>
     </g>
  </svg>
</div>

<div class="btns">
  <button id="resize">resize</button>
  <button id="rem-pad">remove padding</button>
</div>