How to change the size of svg according to the output block?

Question

I have to build this SVG and right now I am facing the issue is that it wasn't fitting on my page. I have to put this SVG in the column of my table and size of the column is fixed but my SVG is not fitting properly under that. It should fit in any column of the table and the size should be also perfectly fitted on that column.

Size of the SVG should be dynamic.

const SVG_NS = 'http://www.w3.org/2000/svg';
let colors = [
  "rgb(255,0,0)",
  "rgb(255,0,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(102,204,0)",
  "rgb(102,204,0)",
  "rgb(102,178,255)"
];


let angle = Math.atan2(215,430);
let n = 0;
let offset = 10;// distance between the border of the triangle and the start of the rectangle

for(let y = 40; y < 430; y+= 40){
  
  let halfW = Math.tan(angle)*y - offset;
  let o = {
    x:430/2 - halfW,
    y: y,
    width: 2*halfW,
    height: 30,
    fill:colors[n]
  }
  
  drawRect(o, polys);
  n++;
}

function drawRect(o, parent) {

  let rect = document.createElementNS(SVG_NS, 'rect');
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      rect.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(rect);
  return rect;
}

.boxed {
	border: 1px solid black ;
	width: 500px;
    height: 130px;    
    box-sizing: border-box;
	padding: 40px;
	

<svg width="600" height="500">
  <g transform="translate(0,40)">
    <rect width="360" height="30" style="fill:rgb(255,0,0);" />
   
  </g>

  <g transform="translate(0,80)">
    <rect width="350" height="30" style="fill:rgb(255,0,0);" />
    
  </g>

  <g transform="translate(0,120)">
    <rect width="350" height="30" style="fill:rgb(255,128,0);" />
   
  </g>

  <g transform="translate(0,160)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    
  </g>

  <g transform="translate(0,200)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    
  </g>

  <g transform="translate(0,240)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    
  </g>

  <g transform="translate(0,280)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    
  </g>

  <g transform="translate(0,320)">
    <rect width="300" height="30" style="fill:rgb(102,204,0);" />
   
  </g>

  <g transform="translate(0,360)">
    <rect width="300" height="30" style="fill:rgb(102,204,0);" />
    
  </g>

  <g transform="translate(0,400)">
    <rect width="300" height="30" style="fill:rgb(102,178,255);" />
    
  </g>
<svg id="polys" height="500" width="500" viewBox="0 0 500 500" x="160"  >
  <polygon points="215,0, 0,440 430,440 215,0" style="fill:rgb(255,255,204);stroke:black;stroke-width:2" />
</svg>
</svg>

Answer 1

You need to change the width and height of the svg element with viewBox. This way the SVG element will take all the available space inside the parent container. However if your container is 500px wide and 130px height, the SVG will overflow the container.

const SVG_NS = 'http://www.w3.org/2000/svg';
let colors = [
  "rgb(255,0,0)",
  "rgb(255,0,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(255,128,0)",
  "rgb(102,204,0)",
  "rgb(102,204,0)",
  "rgb(102,178,255)"
];


let angle = Math.atan2(215,430);
let n = 0;
let offset = 10;// distance between the border of the triangle and the start of the rectangle

for(let y = 40; y < 430; y+= 40){
  
  let halfW = Math.tan(angle)*y - offset;
  let o = {
    x:430/2 - halfW,
    y: y,
    width: 2*halfW,
    height: 30,
    fill:colors[n]
  }
  
  drawRect(o, polys);
  n++;
}

function drawRect(o, parent) {

  let rect = document.createElementNS(SVG_NS, 'rect');
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      rect.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(rect);
  return rect;
}

.boxed {
	border: 1px solid black ;
	width: 500px;
  height: auto;    
  box-sizing: border-box;
	padding: 40px;
}

svg{border:1px solid; display:block;}

<div class="boxed">
<svg viewBox="0 0 600 500" height="130" >
  <g transform="translate(0,40)">
    <rect width="360"viewBox="0 0 600 500" height="30" style="fill:rgb(255,0,0);" />
   
  </g>

  <g transform="translate(0,80)">
    <rect width="350" height="30" style="fill:rgb(255,0,0);" />
    
  </g>

  <g transform="translate(0,120)">
    <rect width="350" height="30" style="fill:rgb(255,128,0);" />
   
  </g>

  <g transform="translate(0,160)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    
  </g>

  <g transform="translate(0,200)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    
  </g>

  <g transform="translate(0,240)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    
  </g>

  <g transform="translate(0,280)">
    <rect width="300" height="30" style="fill:rgb(255,128,0);" />
    
  </g>

  <g transform="translate(0,320)">
    <rect width="300" height="30" style="fill:rgb(102,204,0);" />
   
  </g>

  <g transform="translate(0,360)">
    <rect width="300" height="30" style="fill:rgb(102,204,0);" />
    
  </g>

  <g transform="translate(0,400)">
    <rect width="300" height="30" style="fill:rgb(102,178,255);" />
    
  </g>

<svg id="polys" height="500" width="500" viewBox="0 0 500 500" x="160"  >
  <polygon points="215,0, 0,440 430,440 215,0" style="fill:rgb(255,255,204);stroke:black;stroke-width:2" />
</svg>
</svg>
</div>

However if you try put