能否用CSS transform调整单个SVG path高度？非缩放、非整体SVG

针对你遇到的SVG边框调整问题，以下是三种直接可行的解决方案，覆盖不同需求场景：

方案1：快速修复缩放方向与遮挡问题 #

直接通过CSS调整变换原点与SVG溢出规则，解决边框仅向下延伸、被遮挡的问题：

修改后的CSS： #

#box{
  position:absolute;
  left: 80px;
}
#t-shirt{
  position: absolute;
  left:0;
  top: 25%;
  overflow: visible; /* 关闭SVG默认的溢出隐藏，避免边框被截断 */
}
#t-shirt:hover {
  transform: scale(1,1.2);
  transform-origin: center center; /* 设置以元素中心为缩放原点，实现上下对称延伸 */
}
#pants{
  position: absolute;
  left: 160px;
  top: 25%;
  overflow: visible;
}
#pants:hover #pants-border{
  transform: scale(1,1.2);
  transform-origin: center center;
}

优点：代码改动最小，快速实现效果；缺点：仍存在圆角拉伸问题。

方案2：分离边框与内部图标，独立控制尺寸 #

将边框和内部图标拆分为独立元素，单独缩放边框时保持图标尺寸不变：

修改后的HTML： #

<svg id="t-shirt" width="147" height="147" viewBox="0 0 147 147" fill="none" xmlns="http://www.w3.org/2000/svg" style="overflow: visible;">
  <!-- 独立的边框路径 -->
  <path id="t-shirt-border" d="M19.3522 0.706462H126.757C137.178 0.706462 145.626 9.15414 145.626 19.5749V126.98C145.626 137.4 137.178 145.848 126.757 145.848H19.3522C8.93148 145.848 0.483806 137.4 0.483806 126.98V19.5749C0.483806 9.15414 8.93149 0.706462 19.3522 0.706462Z" fill="#EBEBEB" stroke="#242420" stroke-width="0.967611"/>
  <!-- 内部图标用g标签包裹，保持独立 -->
  <g id="t-shirt-icon">
    <path d="M112.243 116.336H34.834L35.0547 113.12L35.2341 110.749L35.441 107.977L35.6066 105.579L35.8135 102.806L35.9928 100.408L36.1998 97.6353L36.3653 95.2648L41.1525 29.251H53.8172C53.9529 34.4014 56.0844 39.295 59.7577 42.8896C63.431 46.4841 68.3559 48.4956 73.4833 48.4956C78.6106 48.4956 83.5354 46.4841 87.2087 42.8896C90.882 39.295 93.0136 34.4014 93.1493 29.251H105.869L110.643 95.2648L110.822 97.6353L111.029 100.408L111.194 102.806L111.401 105.579L111.581 107.977L111.788 110.749L111.953 113.12L112.243 116.336Z" fill="#D9D9D9"/>
    <path d="M37.7369 29.251L13.5466 58.7078L34.2872 75.6963L37.7369 29.251Z" fill="#d9d9d9"/>
    <path d="M109.34 29.251L133.53 58.7078L112.776 75.6963L109.34 29.251Z" fill="#D9D9D9"/>
  </g>
</svg>

<svg id="pants" width="148" height="147" viewBox="0 0 148 147" fill="none" xmlns="http://www.w3.org/2000/svg" style="overflow: visible;">
  <path id="pants-border" d="M19.8137 0.706462H128.186C138.607 0.706462 147.055 9.15414 147.055 19.5749V126.98C147.055 137.4 138.607 145.848 128.186 145.848H19.8136C9.39288 145.848 0.945231 137.4 0.945231 126.98V19.5749C0.945231 9.15414 9.39291 0.706462 19.8137 0.706462Z" fill="#EBEBEB" stroke="#242420" stroke-width="0.967611"/>
  <g id="pants-icon">
    <path d="M103.028 12.8018V19.575L74 19.5611V19.575H44.9717V12.8018H103.028Z" fill="#DADADA"/>
    <path d="M94.3198 24.4131H103.028V33.1216C94.465 32.713 94.3198 24.4131 94.3198 24.4131Z" fill="#DADADA"/>
    <path d="M103.028 38.4122V132.786H80.6181L74.021 45.4874L67.382 132.786H44.9717V38.4122C48.7254 37.779 57.6755 35.1361 57.6755 24.4131H71.5839C71.5839 31.7636 71.3738 38.1781 73.993 38.2607C76.6262 38.2607 76.4161 31.7636 76.4161 24.4131H90.3385C90.3245 35.1361 99.2746 37.779 103.028 38.4122Z" fill="#DADADA"/>
    <path d="M44.9717 33.1216V24.4131H53.6802C53.6802 24.4131 53.5205 32.713 44.9717 33.1216Z" fill="#DADADA"/>
  </g>
</svg>

配套CSS： #

#t-shirt, #pants {
  position: absolute;
  top: 25%;
  overflow: visible;
}
#t-shirt { left:0; }
#pants { left: 160px; }

/* 仅缩放边框，图标不受影响 */
#t-shirt:hover #t-shirt-border,
#pants:hover #pants-border {
  transform: scale(1,1.2);
  transform-origin: center center;
}

优点：边框缩放时内部图标完全保持原尺寸；缺点：仍存在轻度圆角拉伸。

方案3：修改SVG路径本身，彻底解决圆角变形 #

直接调整边框路径的坐标，而非用transform缩放，从根源避免圆角拉伸问题：

修改后的CSS（配合路径过渡）： #

#t-shirt-border, #pants-border {
  transition: d 0.3s ease;
}
#t-shirt:hover #t-shirt-border {
  /* 手动调整路径高度，上下各扩展14px，保持圆角半径不变 */
  d: path("M19.3522 -13.2935H126.757C137.178 -13.2935 145.626 -4.84586 145.626 5.5749V140.48C145.626 150.9 137.178 159.348 126.757 159.348H19.3522C8.93148 159.348 0.483806 150.9 0.483806 140.48V5.5749C0.483806 -4.84586 8.93149 -13.2935 19.3522 -13.2935Z");
}
#pants:hover #pants-border {
  d: path("M19.8137 -13.2935H128.186C138.607 -13.2935 147.055 -4.84586 147.055 5.5749V140.48C147.055 150.9 138.607 159.348 128.186 159.348H19.8136C9.39288 159.348 0.945231 150.9 0.945231 140.48V5.5749C0.945231 -4.84586 9.39291 -13.2935 19.8137 -13.2935Z");
}

优点：圆角完全保持原形状，无拉伸；缺点：需要手动计算路径坐标，适合静态尺寸调整。

响应式适配方案 #

无需额外div容器，直接给SVG设置百分比宽度实现响应式：

#box {
  position: absolute;
  left: 5%;
  width: 90%;
  height: auto; /* 保持SVG原比例 */
}
#t-shirt, #pants {
  position: absolute;
  width: 45%;
  height: auto;
  top: 25%;
}
#t-shirt { left: 2.5%; }
#pants { left: 52.5%; }

内容的提问来源于stack exchange，提问作者Miguel Gisbert