Question

此codepen显示了我的设置。 svg应该像将flex-direction设置为row时那样与父级缩放。

希望你能帮助我

 flex-direction: column;

编辑：复制了代码笔代码

<div class="grandparent">
<div class="parent">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" 
class="child" width="100%" height="100%">
  <line class="top" x1="0" y1="0" x2="300%" y2="0" />
  <line class="left" x1="0" y1="100%" x2="0" y2="-200%" />
  <line class="bottom" x1="100%" y1="100%" x2="-200%" y2="100%" />
  <line class="right" x1="100%" y1="0" x2="100%" y2="300%" />
</svg>
</div>
</div>


 .grandparent {
 height: 50vh;
 width: 50vh;

display: flex; 
flex-direction: column;
  }

 .parent {
  flex: auto;
 position: relative;
}

svg line {
   stroke-width: 3;
stroke: #000;
fill: none;
}

Answer 1

使用视图框而不是高度和宽度来缩放svg。

示例：viewbox =“ 0 0 100 100”。

https://css-tricks.com/scale-svg/

svg不会缩放到全高，父级伸缩，伸缩方向：列

1 个答案: