如何用<svg>元素绘制菱形？<polygon>代码填充异常求助

你的问题出在<polygon>的points顺序上——当前的点序列会让路径交叉，导致填充时被分割成两个三角形。SVG的多边形填充依赖非交叉的闭合路径，点必须按顺时针或逆时针的连续顺序排列，不能出现“回折”交叉的情况。

修正后的代码 #

<div>
    <svg width="2000" height="2000">
    <polygon points="50 0, 75 25, 50 50, 25 25" style="fill: blue; stroke: black;"/>
    </svg>
</div>

说明 #

• 调整后的点顺序为：顶部顶点(50,0) → 右侧顶点(75,25) → 底部顶点(50,50) → 左侧顶点(25,25)，SVG会自动将最后一个点与起点闭合
• 这种顺时针连续排列的路径不会交叉，填充后就是完整的菱形
• 换成逆时针顺序（如50 0, 25 25, 50 50, 75 25）也能得到相同效果

内容的提问来源于stack exchange，提问作者José A. Flores Oria