如何配置<svg>根据<rect>数量实现横向可滚动、均匀分布并消除右侧留白

你现在遇到的右侧冗余留白、横向滚动失效的问题，根源完全出在SVG的配置逻辑上：

• 给<svg>硬写了width="100%"的属性，同时搭配了固定写死的viewBox="0 0 530 15"——这会强制SVG不管内部实际有多少渲染内容，都按100%屏幕宽度拉伸，哪怕内部rect实际占的宽度远达不到视口宽度，右侧自然会生成和缩放比例不匹配的大片空白。
• 给<svg>加了overflow: hidden，会直接把超出视口范围的内容裁切，根本触发不了父级.wrapper的横向滚动。
• 所有<rect>的x属性全部硬写为0，没有按横向排布计算实际内容总宽度，完全没触发SVG的内容宽度自适应逻辑。
• 顺带提一句，你写的小写viewbox是不符合SVG属性命名规范的，原生SVG属性大小写敏感，小写写法浏览器实际不会识别，等于这个视口配置根本没生效。

基础配置调整 #

• 移除<svg>上硬写的width="100%"、overflow: hidden配置，替换为宽度自适应逻辑：
  • 给svg设width: max-content，让SVG宽度完全由内部所有元素的实际总占用宽度撑开，从根源上杜绝凭空生成的多余空白
  • 给svg设min-width: 100%，保证宽屏场景下SVG能撑满屏幕宽度，不会缩成一小条
• 修正大小写错误的viewBox属性，把视口宽度改成和内容比例匹配的值，不要硬写不切实际的530
• 保留父级.wrapper的overflow-x: auto; max-width: 100%配置，这部分写法是正确的。

未知数量rect的均匀间距实现 #

因为rect数量不固定，不要手动逐个计算x坐标写死值，直接用现代SVG支持的Flex布局实现自动排布：

• 给svg加display: flex; gap: 自定义间距值（比如8px）; align-items: center;
• 删掉所有rect上硬写的x坐标，靠Flex布局自动按顺序横向排列，gap自动控制元素间距，完全适配rect数量增减的场景，不需要动态修改属性
• 宽屏撑满场景下，给rect加flex: 1 0 auto，让每个rect自动均分剩余的容器宽度，实现间距均匀的撑满效果。这里用flex: 1 0 auto的原因是，允许元素在宽屏下放大均分空间，但不会在窄屏下被压缩变形，刚好匹配横向滚动的需求。

小屏横向滚动的触发逻辑 #

调整后的配置会自动适配两种场景：

• 当内部所有rect加间距的总宽度 < 父容器宽度时，svg靠min-width:100%撑满屏幕，rect靠flex均分空间，实现均匀排布
• 当内部内容总宽度 > 父容器的最大宽度限制时，svg保持自身的内容总宽度，触发.wrapper的横向滚动，既不会在右侧留多余空白，也不会裁切内容。

.wrapper {
  overflow-x: auto;
  max-width: 100%;
}

svg {
  width: max-content;
  min-width: 100%;
  height: 30px;
  display: flex;
  gap: 8px;
  vertical-align: middle;
}

/* 宽屏下让rect均分剩余空间 */
svg rect {
  flex: 1 0 auto;
}

<div class="wrapper">
  <svg height="30" version="1.1" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg">
    <rect aria-expanded="false" fill-opacity="1" height="30" width="12" rx="3" ry="3"></rect>
    <rect aria-expanded="false" fill-opacity="1" height="30" width="12" rx="3" ry="3"></rect>
    <rect aria-expanded="false" fill-opacity="1" height="30" width="12" rx="3" ry="3"></rect>
  </svg>
</div>

注意：你当前代码里三个rect分别设置了y=0、y=10.25、y=20.25，但单个rect高度就有30，三个rect叠加的总高度已经超出了svg设置的30高度范围，需要根据实际渲染需求调整rect高度或者svg的整体高度值，避免内容被裁切。

内容的提问来源于stack exchange，提问作者Ryan H