Html 如何创建具有统一笔划宽度的SVG多边形？

我试图创建一个SVG多边形，在元素周围有一个边框（或者在本例中是一个笔划）。这在大多数情况下都有效，但是多边形的剪裁边的笔划似乎比其他边的笔划更厚。是否有办法确保笔划宽度在形状周围均匀

这是一张说明问题的图片

左上和右下边缘的笔划明显比其他边或边缘厚

代码基本上是这样的

---

笔划的宽度确实是

4

单位，但它被viewbox剪裁了。请记住，笔划沿其路径居中，而不是与一侧对齐

…因此，如果您有一个

01100100

的视图框，并且有一条从

（0,0）

到

（0100）

的线或路径，您给它一个

7px的笔划，然后，只有该笔划宽度的
3.5px
可见，因为另一半将存在于
x=-3.5px
和
x=0
之间

如果增加视图框的大小和/或移动
多边形
，使其点距离视图框侧面至少
4
“单位”，则完整路径将可见：

（它是
4
“单位”，而不是
4px
，因为是无单位宽度（如
笔划宽度：4；
）-因此您可能需要向
笔划宽度
属性添加显式单位，以实现一致的渲染


笔划的宽度实际上是
4
单位，但它被viewbox剪裁。请记住笔划沿其路径居中，而不是与一侧对齐

…因此，如果您有一个
0 100 100
的视图框，并且有一条从
（0,0）
到
（0100）的线或路径
给它一个
7px
的笔划，那么只有该笔划宽度的
3.5px
可见，因为另一半存在于
x=-3.5px
和
x=0
之间

如果增加视图框的大小和/或移动
多边形
，使其点距离视图框侧面至少
4
“单位”，则完整路径将可见：

（它是
4
“单位”，而不是
4px
，因为是无单位宽度（如
笔划宽度：4；
）-因此您可能需要向
笔划宽度
属性添加显式单位，以实现一致的渲染



无单位宽度是画布大小的%”这一说法不正确。无单位宽度假定为userSpaceOnUse单位，即通过当前变换堆栈进行调整的viewBox单位。详细信息：。在这种情况下，它仅为4%，因为viewBox已将0-100作为水平轴的比例，这只会发生在SVG 1.1中，只有两种单元类型——userSpaceOnUse和objectBoundingBox以及其他单元类型（pt、vh等）仅支持调整SVG元素本身的大小。@MichaelMullany谢谢您的反馈！我已更新了我的答案。您不正确，无单位宽度是画布大小的%。无单位宽度假定为userSpaceOnUse单位，即视框单位，由当前变换堆栈调整。详细信息：。在本例中-它仅为4%，因为viewBox已将0-100作为水平轴的比例，这恰好对应于4%。在SVG 1.1中，只有两种单位类型—userSpaceOnUse和objectBoundingBox以及其他单位类型（pt、vh等）只支持调整SVG元素本身的大小。@MichaelMullany谢谢您的反馈！我已经更新了答案。