如何让SVG箭头自适应父容器并保持宽高比？

问题根源 #

1. 原SVG未定义viewBox属性，浏览器无法识别图形的坐标系统范围，缩放时只能粗暴拉伸整个SVG容器，导致箭头出现偏移或变形
2. 嵌套的<g>元素带有translate(11.26,0.75) rotate(90)变换，该变换基于原始坐标基准，在无明确viewBox的情况下，缩放会让变换基准错位，引发箭头晃动或偏移

解决方案 #

步骤1：整合变换并确定图形边界

移除<g>的变换，将旋转、平移效果直接应用到<path>坐标上，得到箭头的实际边界：原箭头旋转90度后，宽为5.24，高为5.76，坐标范围从(0,0)到(5.24,5.76)

步骤2：配置SVG属性

给SVG添加viewBox明确坐标范围，同时设置宽高为100%以填充父容器，显式声明preserveAspectRatio确保宽高比不变

修正后的代码

<!-- 父容器示例，可任意设置宽高 -->
<div style="height: 100px; border: 1px solid #ddd;">
  <svg xmlns="http://www.w3.org/2000/svg" 
       viewBox="0 0 5.24 5.76" 
       width="100%" 
       height="100%" 
       preserveAspectRatio="xMidYMid meet">
    <path d="M6.58 5.76 L9.2 5.76 L9.2 3.14 L10.51 3.14 L7.9 0 L5.27 3.14 L6.58 3.14 L6.58 5.76 Z" />
  </svg>
</div>

关键参数说明 #

• viewBox="0 0 5.24 5.76"：对应箭头旋转后的实际宽高，是SVG缩放的基准坐标范围
• width="100%" height="100%"：让SVG完全填充父容器空间
• preserveAspectRatio="xMidYMid meet"：确保箭头在缩放时保持宽高比，且居中显示在容器内

内容的提问来源于stack exchange，提问作者Daniel Dority