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/

的小提琴

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>

这是一个更新的小提琴：https://jsfiddle.net/4e6LkLjs/1/

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

1 个答案: