减少SVG路径的厚度

Question

减少SVG路径的厚度

5

有没有办法减小SVG路径的粗细？我有一个SVG格式的图标，但这个图标只由单一路径构成。调整“fill”或“stroke-width”属性没有效果。

我的目标是将可见边框的厚度减半。

<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技巧吗？

- Adam Mrozek

1

将其加载到Inkscape中并调整形状。 - Robert Longson

用愚蠢的方式来做：添加 path, polygon{stroke-width:1px;stroke:white;}。 - enxaneta

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amadan · Accepted Answer

路径的粗细可以忽略不计。路径并没有定义您看到的线条，而是明确地定义了这些线条的边界。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>