Как изменить размер SVG в зависимости от блока вывода?

Question

Мне нужно создать этот SVG, и сейчас я сталкиваюсь с проблемой, заключающейся в том, что он не уместился на моей странице.Я должен поместить этот SVG в столбец моей таблицы, и размер столбца фиксирован, но мой SVG не подходит под это.Он должен вписываться в любой столбец таблицы, а размер должен также идеально подходить для этого столбца.

Размер SVG должен быть динамическим.

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

Вам необходимо изменить ширину и высоту элемента svg с помощью viewBox.Таким образом, элемент SVG займет все доступное пространство внутри родительского контейнера.Однако, если ваш контейнер имеет ширину 500 пикселей и высоту 130 пикселей, SVG переполнит контейнер.

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>

Однако, если вы попытаетесь поставить