html - 如何将笔划宽度均匀地赋予圆形 svg 六边形？

Question

我制作了一个具有笔划宽度的圆形六边形，但顶部和底部曲线较暗。如何给边框均匀的描边宽度？这是我的 svg 代码

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200.91789367798975 232" style="filter: drop-shadow(rgba(255, 255, 255, 0.498039) 0px 0px 10px);">
                <path stroke="grey" stroke-width="0.8" fill="none" d="M79.67433714816835 11.999999999999998Q100.45894683899488 0 121.2435565298214 12L180.13328398716322 46Q200.91789367798975 58 200.91789367798975 82L200.91789367798975 150Q200.91789367798975 174 180.13328398716322 186L121.2435565298214 220Q100.45894683899488 232 79.67433714816835 220L20.784609690826528 186Q0 174 0 150L0 82Q0 58 20.784609690826528 46Z">
                </path>
            </svg>

这是相同的 https://jsfiddle.net/4e6LkLjs/ 的 fiddle

Answer 1

只要给它一些宽度和高度，它就会工作。笔划宽度甚至在您的 svg 上，您只是看不到整个形状，因为它超出了 svg 范围。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="700" height="700" viewbox="0 0 200.91789367798975 232" style="filter: drop-shadow(rgba(255, 255, 255, 0.498039) 0px 0px 10px);">
                <path stroke="grey" stroke-width="0.8" fill="none" d="M79.67433714816835 11.999999999999998Q100.45894683899488 0 121.2435565298214 12L180.13328398716322 46Q200.91789367798975 58 200.91789367798975 82L200.91789367798975 150Q200.91789367798975 174 180.13328398716322 186L121.2435565298214 220Q100.45894683899488 232 79.67433714816835 220L20.784609690826528 186Q0 174 0 150L0 82Q0 58 20.784609690826528 46Z">
                </path>
            </svg>

这是一个更新的 fiddle :https://jsfiddle.net/4e6LkLjs/1/