关于SVG图标路径与可见区域比例设置及轨道尺寸错误的咨询

问题原因 #

你的SVG路径看起来超出元素，核心原因是stroke-width会在路径线条的两侧扩展。你设置了stroke-width: 1.4px，意味着线条会向路径内外各延伸0.7px。而你的路径坐标（比如y=0、y=19、x=1、x=19）紧贴甚至触及viewBox="0 0 20 20"的边界，导致stroke的一部分跑到viewBox外面，视觉上就呈现为路径超出SVG元素。

解决方案 #

方案1：调整viewBox，给stroke预留空间 #

直接扩大viewBox范围，让stroke的扩展部分完全落在viewBox内。把原viewBox从0 0 20 20修改为：

<svg viewBox="-0.7 -0.7 21.4 21.4">

这相当于在原viewBox的上下左右各增加了0.7px（stroke-width的一半）的空间，刚好容纳stroke的扩展部分，路径和stroke就不会超出SVG可见区域了。

方案2：调整路径坐标，避免紧贴边界 #

修改path的坐标，让路径本身和viewBox边界之间留出至少0.7px的距离（对应stroke-width的一半）。比如把你的path代码改成：

<path d="M 1.7 0.7 L 18.3 9.5 L 1.7 18.3">

这样路径本身离viewBox的0和20边界有0.7px的间隙，stroke扩展后刚好填满到边界，不会超出。

方案3：设置SVG的overflow为hidden（仅临时隐藏，不推荐） #

如果只是想快速隐藏超出部分，可以给SVG添加overflow: hidden样式，但这只是视觉上的隐藏，并没有真正实现“适配”效果：

SVG {
  /* 保留原有样式 */
  overflow: hidden;
}

实现类似Twitter图标的适配效果 #

要让图标path周围的区域完全适配，本质是让路径+stroke的整体尺寸刚好匹配viewBox，再通过SVG继承容器的width/height属性，就能实现类似auto容器的紧凑适配感。上面的方案1或方案2都能达到这个效果，推荐方案1，无需修改路径坐标，灵活性更高。

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