为何SVG中部分polygon的stroke-dasharray属性不生效？

你的问题核心出在Polygon元素的闭合特性上：

• Polygon是闭合图形，哪怕只定义两个点，浏览器也会自动把终点连回起点，形成闭合路径。比如line_1的竖线，实际渲染的路径是从(194.2,121)到(194.2,175)，再原路返回起点，等于把同一条线重复画了一次。
• Stroke-dasharray是作用在整个闭合路径上的。当闭合路径的总长度和dasharray的循环单元（5+2=7）形成特殊比例时，虚线的起始段和结束段会在起点重合叠加，视觉上就变成了实线。你例子里的竖线长度为54，闭合后总长度108，这个长度与7的比例刚好触发了叠加；而line_3的横线长度34.2，闭合后总长度68.4，比例未触发叠加，所以还能看到虚线效果。
• 而Line元素是开放路径，不会自动闭合，路径就是两个点之间的线段，因此dasharray能按正常逻辑渲染虚线。

• 绘制直线优先用<line>元素，完全适配直线场景，不存在闭合带来的渲染问题。
• 如果非要用多边形类元素，换成<polyline>——它是开放的多边形，不会自动闭合路径，两个点的polyline和line效果一致，能正常渲染虚线：

<polyline id="line_1" points="194.2,121.0 194.2,175.0 " fill="none" stroke-dasharray="5,2" stroke="#ff0000"></polyline>

内容的提问来源于stack exchange，提问作者Jamison Jiang