如何让SVG元素宽度与内部chevron路径（path）的实际宽度一致？

问题原因 #

你当前的SVG设置了viewBox="0 0 512.001 512.001"，这个视口是512px宽的正方形，而chevron路径本身没有占满整个视口宽度，左右两侧留下了大量透明空白，导致SVG元素整体宽度远超图标实际可视宽度。

修复方案 #

直接修改SVG的viewBox属性，裁剪掉左右多余的透明区域即可。计算路径的实际边界后，将viewBox调整为123.179 0 272.457 512.001，对应参数含义为「视口左偏移、视口上偏移、视口宽度、视口高度」，刚好能完整包裹你的chevron路径，不会有多余空白。

修改后的完整SVG代码如下：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="123.179 0 272.457 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path style="fill:#FFF;" d="M388.819,239.537L156.092,6.816c-9.087-9.089-23.824-9.089-32.912,0.002
    c-9.087,9.089-9.087,23.824,0.002,32.912l216.27,216.266L123.179,472.272c-9.087,9.089-9.087,23.824,0.002,32.912
    c4.543,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.817L388.819,272.45c4.366-4.364,6.817-10.283,6.817-16.455
    C395.636,249.822,393.185,243.902,388.819,239.537z"/>
</svg>

可选额外优化 #

如果需要进一步控制SVG显示尺寸，还可以给SVG添加宽高属性或者CSS样式，比如设置width="1em"让图标大小和当前行文字一致，适配不同场景的使用需求。

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