减少 svg 路径的厚度答案

【问题标题】：Decrease thickness of svg path减少 svg 路径的厚度
【发布时间】：2018-09-21 11:40:29
【问题描述】：

有没有办法减少 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 技巧？

【问题讨论】：

在inkscape中加载并调整形状
笨办法：加path, polygon{stroke-width:1px;stroke:white;}

标签： html svg

【解决方案1】：

路径粗细可以忽略不计。您的路径不是定义您看到的线条，而是明确定义这些线条的 border。您可以通过添加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>

【讨论】：

很好的解决方案@Amadan。我用 14 的笔画宽度将一个非常笨重的图标修剪成更优雅的东西。