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

时间：2021-05-02

大家好，我是前端进阶者。

polygon元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状，最后一点连接到第一点。 元素通常用于绘制具有多个(3个或更多)侧面/边缘的形状。

一、 Polygon 画多边形

简单的SVG多边形:

例

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

<bodystyle="background-color:aqua;">

<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">

<polygonpoints="10,060,035,50"style="stroke:#660000;fill:#cc3333;"/>

</svg>

</body>

</html>

运行后效果如下:

解析：

即使仅列出了3个点，也都绘制了所有3个面。这是因为 元素在所有点之间绘制线，包括从最后一个点到第一个点的一条线。该 不会从最后一点到第一画线。

这似乎是 和 元素的唯一区别。

二、绘制不规则四边形

下面的示例创建一个四边的多边形：

下面是SVG代码：

<!DOCTYPEhtml>

<html>

<bodystyle="background-color:aqua;">

<svgheight="250"width="500">

<polygonpoints="220,10300,210170,250123,234"style="fill:lime;stroke:purple;stroke-width:1"/>

</svg>

</body>

</html>

三、绘制六边形

代码如下:

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

<bodystyle="background-color:aqua;">

<svgwidth="120"height="120"viewPort="00120120"version="1.1"xmlns="http://www.w3.org/2000/svg"style="stroke:#660000;fill:#cc3333;">

<polygonpoints="60,20100,40100,8060,10020,8020,40"/>

</svg>

</body>

</html>

运行效果如下：

四、八边形

8个边的多边形(八边形):

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

<bodystyle="background-color:aqua;">

<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">

<polygonpoints="50,5100,5125,30125,80100,105

50,10525,8025,30"style="stroke:#660000;fill:#cc3333;stroke-width:3;"/>

</svg>

</body>

</html>

运行效果如下：

五、SVG 画五角星

案例

使用 元素创建一个星型:

代码如下:

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

<bodystyle="background-color:aqua;">

<svgxmlns="http://www.w3.org/2000/svg"version="1.1"height="320">

<polygonpoints="100,1040,180190,6010,60160,180"style="fill:red;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>

</svg>

</body>

</html>

运行后效果如下:

改变 fill-rule 属性为 "evenodd":

下面是SVG代码：

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

<bodystyle="background-color:aqua;">

<svgheight="210"width="500">

<polygonpoints="100,1040,198190,7810,78160,198"style="fill:red;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>

</svg>

</body>

</html>

运行效果：

六、总结

本文基于Htm基础，介绍了如何去画多边形，通过Polygon元素变换参数画不一样的的多边形。(四边形，如六边形，八边形等等)，最后重点讲解了如何去画五角星，讲解画五角星时需要注意的点，在转换过程中，改变 fill-rule 属性绘制不一样的五角星图像。通过丰富的案例分析，希望读者能够更好的去理解和学习。

欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

代码很简单，希望对你学习有帮助。

原文地址：https://mp.weixin.qq.com/s/41o-uFZHZ0ggOrs4sQxltg

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章