页面的高度 vh html,html – 使用VH表示高度响应适合框SVG

问题是因为您只将视口单元中的高度分配给容器,而不是实际的SVG元素.因此,容器的高度始终保持响应(如60vh),但svg元素的高度会根据宽度和viewBox设置而变化.这会导致SVG的一部分由于溢出而被剪切：隐藏在容器元素上.

您可以通过从容器中删除overflow：hidden并向SVG元素添加边框来验证上述内容.

要解决此问题,只需将以下CSS属性添加到svg元素即可.这将确保SVG始终只与容器一样大.

svg {

width: 100%;

height: 100%;

}

.svg-container {

display: inline-block;

position: relative;

width: 100%;

height: 60vh; /* aspect ratio */

vertical-align: top;

overflow: hidden;

background-color: yellow;

}

svg {

width: 100%;

height: 100%;

}

.svg-content-responsive {

display: inline-block;

position: absolute;

top: 10px;

left: 0;

border: 1px solid;

}

.line {

fill: none;

stroke: steelblue;

stroke-width: 1.5px;

}

另一种可能的选择是将父容器设置为display：block,然后将所需的维度直接设置为svg元素.

.svg-container {

display: block;

position: relative;

vertical-align: top;

overflow: hidden;

background-color: yellow;

}

svg{

width: 100%;

height: 60vh; /* aspect ratio */

}

.svg-container {

display: block;

position: relative;

vertical-align: top;

overflow: hidden;

background-color: yellow;

}

.svg-content-responsive {

display: inline-block;

position: absolute;

top: 10px;

left: 0;

}

svg {

width: 100%;

height: 60vh; /* aspect ratio */

}

.line {

fill: none;

stroke: steelblue;

stroke-width: 1.5px;

}