设置SVG初始宽高并实现响应式高度，以右侧列高度为准

我完全懂你的需求——就是想让SVG所在的列高度完全由右侧的内容列说了算，SVG本身要有初始尺寸，还得能跟着容器高度响应式缩放，不会在右侧内容少的时候反过来撑高整个布局对吧？

咱们直接来改代码，核心是给SVG加个viewBox属性，再调整一下样式让它能正确继承容器高度：

第一步：修改SVG属性 #

给SVG添加viewBox，它定义了SVG的坐标系统，这样SVG里的图形才能跟着容器尺寸正确缩放。比如你原来的SVG宽度是30，初始高度可以设为100，那viewBox就写成0 0 30 100。另外可以把inline的height属性去掉，用CSS统一控制更灵活：

<svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 30 100">
  <line x1="50%" y1="100%" x2="50%" y2="0%" stroke="black" stroke-width="2" />
  <circle cx="50%" cy="10%" r="5" />
</svg>

第二步：调整CSS样式 #

给SVG加一点样式，确保它能占满所在列的高度，同时保持宽度固定：

.row { display: flex; width: 90vw; }
.col { flex: 1; border: 1px solid lightgray; }
/* 新增的SVG样式 */
.col svg {
  height: 100%; /* 让SVG高度完全继承父列的高度 */
  display: block; /* 去掉SVG作为inline元素默认的底部间距 */
}

原理说明 #

• viewBox是关键：没有它的话，SVG不知道自己的“基准画布”大小，设置height:100%时浏览器没法正确缩放图形，反而会用SVG的默认 intrinsic 高度撑高容器。
• Flex布局的特性：.row用了display:flex，默认会让所有.col拉伸到最高列的高度——也就是右侧内容列的高度。现在SVG高度设为100%，就会完全跟着父列的高度走，不会再主导布局高度了。

现在不管右侧内容多还是少，SVG列的高度都会和右侧保持一致，SVG里的图形也会自动缩放适配高度~

内容的提问来源于stack exchange，提问作者Sam R.