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

【问题标题】：How to give stroke width evenly to rounded svg hexagon?如何将笔画宽度均匀地赋予圆形svg六边形？
【发布时间】：2017-06-19 11:08:17
【问题描述】：

我制作了一个带有笔触宽度的圆角六边形，但顶部和底部的曲线更暗。如何将笔画宽度均匀地赋予边框？这是我的 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/的小提琴

【问题讨论】：

六边形的边正在从视口的边上掉下来......
更改viewbox="-1 0 203 232" 使其适合。
成功了！非常感谢.. @ Niet the Dark Absol

标签： html css svg

【解决方案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/

【讨论】：