如何在 SVG 中绘制具有绝对线宽的多边形？答案

【问题标题】：How to draw a polygon in SVG with absolute line width?如何在 SVG 中绘制具有绝对线宽的多边形？
【发布时间】：2023-04-09 05:55:01
【问题描述】：

我的应用程序生成一组要在 SVG 中绘制的图形点。点值始终在水平和垂直的 0-1000 范围内。进行绘图的矩形的大小可能会发生变化。

这是用于在 200 X 85 矩形上绘制图形的 SVG 元素：

<svg width="200" height="85" viewBox="0 0 1000 1000" preserveAspectRatio="none">
    <polyline  stroke="#e69800"
               stroke-width="2px"
               fill="none"
               points="0,1000 100,900 200,800
                       300,700 400,600 500,500
                       600 400 700,300 800,200900,100 1000,0"/>
</svg>

设置viewBox="0 0 1000 1000"使图形缩小到合适的大小，问题是这也会以相同的比例缩小线条的宽度，所以线条不再可见。

SVG 似乎忽略了属性stroke-width="2px" 中的“px”。

有没有办法以绝对像素大小指定线条的宽度（笔画宽度）？

【问题讨论】：

也许看到这个问题：stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg
是的，这成功了。我添加了属性vector-effect="non-scaling-stroke"，现在这条线是 2 像素宽，并且使用抗锯齿绘制，所以看起来不错。 @Joan Charmant：如果您将此作为答案，我会接受。谢谢！

标签： svg

【解决方案1】：

您可以使用属性vector-effect="non-scaling-stroke" 来防止线条与其余部分一起缩放。

参考：http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke

这个修改产生的视觉效果是笔画宽度不依赖于元素的转换（包括非均匀缩放和剪切变换）和缩放级别

SVG1.1似乎不支持非缩放笔画，所以最终结果可能取决于渲染引擎。

【讨论】：

Chrome 和 Firefox 与 demo of non-scaling-stroke 兼容，但 IE（IE9 和 IE10）不能。