html - 减少 svg 路径的厚度

Question

有没有办法减少svg路径厚度？我有以下 svg 格式的图标，但此图标是由单个路径制作的。调整属性“填充”或“笔画宽度”不起作用。

我想要做的是将可见边框的厚度减少一半。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
    <g>
        <path d="M24,14.059V5.584L18.414,0H0v32h24v-0.059c4.499-0.5,7.998-4.309,8-8.941C31.998,18.366,28.499,14.556,24,14.059z    M17.998,2.413L21.586,6h-3.588V2.413z M2,30V1.998h14v6.001h6v6.06c-1.752,0.194-3.352,0.89-4.652,1.941H4v2h11.517   c-0.412,0.616-0.743,1.289-0.994,2H4v2h10.059C14.022,22.329,14,22.661,14,23c0,2.829,1.308,5.351,3.349,7H2z M23,29.883   c-3.801-0.009-6.876-3.084-6.885-6.883c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885   C29.874,26.799,26.799,29.874,23,29.883z M20,12H4v2h16V12z" style="/* transform: scale(0.5, 0.5); *//* stroke: black; */"/>
        <g>
            <polygon points="28,22 24.002,22 24.002,18 22,18 22,22 18,22 18,24 22,24 22,28 24.002,28 24.002,24 28,24   "/>
        </g>
    </g>
</svg>

有没有可以做到这一点的在线编辑器？或者也许有一些我不知道的 css 技巧？

Answer 1

路径厚度可以忽略不计。您的路径并没有定义您看到的线条，而是明确定义了这些线条的边界。您可以通过添加 stroke="red" 来查看路径所描述的内容.您不能仅通过调整属性来减少填充多边形的厚度。在不完全重做路径的情况下，您唯一可以做的就是使用背景颜色笔划删除填充部分的一部分，尽管我认为它看起来不如手工制作的图标:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
    <g>
        <path stroke-width="1" stroke="white" d="M24,14.059V5.584L18.414,0H0v32h24v-0.059c4.499-0.5,7.998-4.309,8-8.941C31.998,18.366,28.499,14.556,24,14.059z    M17.998,2.413L21.586,6h-3.588V2.413z M2,30V1.998h14v6.001h6v6.06c-1.752,0.194-3.352,0.89-4.652,1.941H4v2h11.517   c-0.412,0.616-0.743,1.289-0.994,2H4v2h10.059C14.022,22.329,14,22.661,14,23c0,2.829,1.308,5.351,3.349,7H2z M23,29.883   c-3.801-0.009-6.876-3.084-6.885-6.883c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885   C29.874,26.799,26.799,29.874,23,29.883z M20,12H4v2h16V12z" style="/* transform: scale(0.5, 0.5); *//* stroke: black; */"/>
        <g>
            <polygon stroke-width="1" stroke="white" points="28,22 24.002,22 24.002,18 22,18 22,22 18,22 18,24 22,24 22,28 24.002,28 24.002,24 28,24   "/>
        </g>
    </g>
</svg>