SVG样式异常：不遵循父容器高度，TextField装饰组件图标溢出问题

问题回顾 #

开发支持可选左侧装饰组件的TextField时，给装饰组件的父容器设置固定高度（比如3rem）后，SVG图标依然会超出容器边界，且父容器高度出现异常的自适应情况。

问题原因 #

• SVG默认会遵循自身的viewBox或原始尺寸渲染，即使父容器设置了高度，没有明确约束的SVG会按自身尺寸显示，导致超出容器。
• 父容器未设置overflow: hidden，SVG超出部分无法被隐藏。
• 父容器缺少居中布局的样式，SVG没有被限制在容器内部空间内。

具体解决方法 #

1. 给SVG添加自适应尺寸约束 #

让SVG完全适配父容器的空间，同时保持比例：

/* 装饰组件容器内的SVG样式 */
.textfield-decorator svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 避免SVG被拉伸变形 */
}

2. 完善父容器的布局与溢出控制 #

通过flex布局实现SVG居中，同时隐藏超出部分：

/* 装饰组件父容器样式 */
.textfield-decorator {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 可选：添加内边距调整图标与容器的间距 */
  padding: 0.4rem;
}

3. 修正SVG的viewBox属性（若可修改SVG源码） #

如果SVG的viewBox设置不合理，会导致渲染尺寸异常。确保viewBox的宽高比例和图标实际比例一致，例如：

<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <!-- 图标路径内容 -->
</svg>

内容的提问来源于stack exchange，提问作者Mike K