React中SVG精灵立方体边缘间隙去除问题（不增宽边缘）

给你几个可行的解决思路，不用增宽边缘就能消除间隙：

1. 用路径衔接属性自动闭合间隙 #

给所有<path>标签添加stroke-linejoin="round"和stroke-linecap="round"属性，这会让路径的转角和端点处自动生成微小圆角，刚好填补衔接处的像素间隙，视觉上不会让边缘变宽。

修改后的Sprite代码：

<svg xmlns="http://www.w3.org/2000/svg" style='display: none'>
    <defs>
    <symbol id="parcel-filled" viewBox="0 0 32 32">
        <path d="M18.166 3.144l6.667 3.079c0.883 0.408 1.621 1.045 2.163 1.827l-10.996 5.498-10.996-5.498c0.541-0.782 1.28-1.42 2.163-1.827l6.667-3.079c1.379-0.637 2.953-0.637 4.332 0z" 
              stroke="white" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round"/>
        <path d="M4.177 9.873c-0.116 0.455-0.177 0.93-0.177 1.415v9.424c0 2.19 1.241 4.175 3.167 5.065l6.667 3.079c0.377 0.174 0.768 0.301 1.166 0.379v-13.95l-10.823-5.412z" 
              stroke="white" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round"/>
        <path d="M17 29.235c0.398-0.079 0.789-0.205 1.166-0.379l6.667-3.079c1.926-0.89 3.167-2.874 3.167-5.065v-9.424c0-0.485-0.061-0.96-0.177-1.415l-10.823 5.412v13.95z" 
              stroke="white" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round"/>
    </symbol>
    </defs>
</svg>

2. 微调路径实现微小重叠 #

手动调整每个路径的坐标，让相邻面的路径边缘稍微重叠0.1-0.2个单位，这样就能覆盖间隙，同时视觉上边缘宽度不变。比如修改第一个路径的底部端点，让它稍微向下延伸一点，和另外两个面的顶部衔接处重叠。

3. 用滤镜实现边缘微小扩散 #

给<symbol>添加一个自定义滤镜，让边缘稍微扩散一点填补间隙，不会改变原路径的尺寸：

<svg xmlns="http://www.w3.org/2000/svg" style='display: none'>
    <defs>
        <filter id="close-gap" x="-1%" y="-1%" width="102%" height="102%">
            <feMorphology operator="dilate" radius="0.1" in="SourceAlpha" result="dilated"/>
            <feFlood flood-color="white" result="color"/>
            <feComposite in="color" in2="dilated" operator="in"/>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
        <symbol id="parcel-filled" viewBox="0 0 32 32" filter="url(#close-gap)">
            <path d="M18.166 3.144l6.667 3.079c0.883 0.408 1.621 1.045 2.163 1.827l-10.996 5.498-10.996-5.498c0.541-0.782 1.28-1.42 2.163-1.827l6.667-3.079c1.379-0.637 2.953-0.637 4.332 0z" 
                  stroke="white" stroke-width="2.2"/>
            <path d="M4.177 9.873c-0.116 0.455-0.177 0.93-0.177 1.415v9.424c0 2.19 1.241 4.175 3.167 5.065l6.667 3.079c0.377 0.174 0.768 0.301 1.166 0.379v-13.95l-10.823-5.412z" 
                  stroke="white" stroke-width="2.2"/>
            <path d="M17 29.235c0.398-0.079 0.789-0.205 1.166-0.379l6.667-3.079c1.926-0.89 3.167-2.874 3.167-5.065v-9.424c0-0.485-0.061-0.96-0.177-1.415l-10.823 5.412v13.95z" 
                  stroke="white" stroke-width="2.2"/>
        </symbol>
    </defs>
</svg>

4. 微小缩放路径覆盖间隙 #

给每个<path>添加transform="scale(1.01)"，让路径稍微放大一点，刚好覆盖间隙，视觉上边缘宽度几乎没有变化：

<svg xmlns="http://www.w3.org/2000/svg" style='display: none'>
    <defs>
    <symbol id="parcel-filled" viewBox="0 0 32 32">
        <path d="M18.166 3.144l6.667 3.079c0.883 0.408 1.621 1.045 2.163 1.827l-10.996 5.498-10.996-5.498c0.541-0.782 1.28-1.42 2.163-1.827l6.667-3.079c1.379-0.637 2.953-0.637 4.332 0z" 
              stroke="white" stroke-width="2.2" transform="scale(1.01)"/>
        <path d="M4.177 9.873c-0.116 0.455-0.177 0.93-0.177 1.415v9.424c0 2.19 1.241 4.175 3.167 5.065l6.667 3.079c0.377 0.174 0.768 0.301 1.166 0.379v-13.95l-10.823-5.412z" 
              stroke="white" stroke-width="2.2" transform="scale(1.01)"/>
        <path d="M17 29.235c0.398-0.079 0.789-0.205 1.166-0.379l6.667-3.079c1.926-0.89 3.167-2.874 3.167-5.065v-9.424c0-0.485-0.061-0.96-0.177-1.415l-10.823 5.412v13.95z" 
              stroke="white" stroke-width="2.2" transform="scale(1.01)"/>
    </symbol>
    </defs>
</svg>

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