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

您需要使用viewBox更改svg元素的宽度和高度。这样，SVG元素将占用父容器内的所有可用空间。但是，如果您的容器宽为500px，高度为130px，则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>

但是，如果您尝试放

如何根据输出块更改svg的大小？

1 个答案: