一篇文章教你用SVG画多边形

大家好，我是前端进阶。多边形元素定义了一个封闭的多边形形状，由一组端对端连接的直线段组成，最后一个点连接到第一个点。元素通常用于绘制具有多个（3个或更多）边/边的形状。1.Polygon绘制多边形简单的SVG多边形：示例运行后效果如下：分析：即使只列出3个点，3个点都被绘制脸。这是因为元素在所有点之间绘制线，包括从最后一个点到第一个点的线。不会从最后一点到第一点画线。这似乎是与元素的唯一区别。2.绘制梯形下面的例子创建了一个四边形：下面是SVG代码：三、绘制六多边形代码如下：">运行效果如下：四边形和八边形（八边形):文档运行效果如下：5.SVG中绘制五角星案例使用元素创建星：代码如下：运行后效果如下：将fill-rule属性改为"evenodd"：下面是SVG代码：运行效果：6.总结本文基于Htm基础，介绍如何绘制多边形，通过Polygon元素的变换参数绘制不同的多边形（四边形，如六边形，八边形等），最后着重讲解如何绘制五角星，说明绘制五角星需要注意的点，转换过程中，改变fill-rule属性，绘制不同的五角星图片，通过丰富的案例学习，希望各位读者能够更好的理解和学习，欢迎大家积极尝试，有时候看别人实现很简单，但是到了自己实现的时候，总会有各种各样的pr问题。不要野心太大，努力理解得更深刻。代码很简单，希望对大家的学习有所帮助。