为何带明确宽高的SVG无法缩放至父容器100%宽度？

你遇到的问题核心在于SVG的**视口（Viewport）**与内部图形坐标系统的映射关系，而非CSS本身没生效——其实你的CSS已经改变了SVG元素的尺寸，但内部图形没有随之适配，导致看起来“没效果”。

具体原因拆解 #

• HTML属性定义初始视口基准
  给SVG设置width="300" height="130"这两个HTML属性时，它们会定义SVG的初始视口大小，也就是内部图形绘制的坐标基准（300px宽、130px高）。如果没有viewBox属性，内部所有图形（比如示例里的矩形）都会基于这个固定坐标系统绘制，不会随SVG元素的外部尺寸变化而缩放。

• CSS仅改变元素显示尺寸，不影响内部坐标
  你设置的svg { width: 100%; height: auto; }确实会覆盖SVG的HTML宽高属性，让SVG元素本身填满400px宽的容器，高度按比例自适应为≈173px。但因为缺少viewBox，内部的矩形还是按照300px×130px的固定尺寸绘制，只会在SVG元素的左上角显示原大小，不会拉伸或缩放填满整个SVG元素的新尺寸——这就是你觉得“无法缩放至容器”的视觉原因。

正确解决方法 #

不需要移除SVG的宽高属性，只需添加viewBox属性，就能让内部图形随容器自动适配：

div {
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

svg {
  width: 100%;
  height: auto;
}

<div>
  <svg width="300" height="130" viewBox="0 0 300 130" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="130" x="0" y="0" rx="20" ry="20" fill="blue" />
  </svg>
</div>

viewBox="0 0 300 130"定义了内部坐标系统的原点（0,0）和大小（300×130），浏览器会自动把这个坐标系统映射到SVG元素的当前显示尺寸（CSS设置的100%宽、auto高），让内部图形完全适配容器。

为什么移除宽高属性能“生效” #

当你移除SVG的width和height属性时，浏览器会将SVG的视口大小默认设置为CSS定义的尺寸（400px宽、≈173px高）。如果你的内部图形用了百分比尺寸（比如width="100%" height="100%"），就会填满容器；但如果是固定像素尺寸，其实还是无法完全适配——这种方式只是规避了问题，而非从根源解决。

内容的提问来源于stack exchange，提问作者Rogier de Ruijter