一篇文章教会你使用SVG 画多边形
myzbx 2025-04-27 15:07 3 浏览
作者：前端进阶者 来源：前端进阶学习交流
大家好，我是前端进阶者。
polygon元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状，最后一点连接到第一点。 元素通常用于绘制具有多个(3个或更多)侧面/边缘的形状。
一、 Polygon 画多边形
简单的SVG多边形:
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<body style="background-color: aqua;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="10,0 60,0 35,50" style="stroke:#660000; fill:#cc3333;" />
</svg>
</body>
</html> 运行后效果如下:
解析：
即使仅列出了3个点，也都绘制了所有3个面。这是因为 元素在所有点之间绘制线，包括从最后一个点到第一个点的一条线。该 不会从最后一点到第一画线。
这似乎是 和 元素的唯一区别。
二、绘制不规则四边形
下面的示例创建一个四边的多边形：
下面是SVG代码：
<!DOCTYPE html>
<html>
<body style="background-color: aqua;">
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
</body>
</html> 三、绘制六边形
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<body style="background-color: aqua;">
<svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke:#660000; fill:#cc3333;">
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40" />
</svg>
</body>
</html> 运行效果如下：
四、八边形
8个边的多边形(八边形):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<body style="background-color: aqua;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon points="50,5 100,5 125,30 125,80 100,105
50,105 25,80 25, 30" style="stroke:#660000; fill:#cc3333; stroke-width: 3;" />
</svg>
</body>
</html> 运行效果如下：
五、SVG 画五角星
案例
使用 元素创建一个星型:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<body style="background-color: aqua;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320">
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red; stroke:purple; stroke-width:5;fill-rule:nonzero;"/>
</svg>
</body>
</html> 运行后效果如下:
改变 fill-rule 属性为 "evenodd":
下面是SVG代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<body style="background-color: aqua;">
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html> 运行效果：
六、总结
本文基于Htm基础，介绍了如何去画多边形，通过Polygon元素变换参数画不一样的的多边形。(四边形，如六边形，八边形等等)，最后重点讲解了如何去画五角星，讲解画五角星时需要注意的点，在转换过程中，改变 fill-rule 属性绘制不一样的五角星图像。通过丰富的案例分析，希望读者能够更好地去理解和学习。
欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
代码很简单，希望对你学习有帮助。
- 上一篇：SVG 绘制曲折线
- 下一篇：图片格式那么多，哪种更适合你?
相关推荐
- 建模大神都在用的软件，哝晓得不?
-
各位宝宝们，阿瑶又来啦！一日不见，甚是想念。今天阿瑶这篇文章是个连载文章连载四天大家走过路过不要错过哦！今天阿瑶先给大家来讲一讲Maya建模类型中的第一个多边形建模。各位宝宝们，赶紧拿好你们的小板凳，...
- 神器推荐 | 制作多边形网格从此不用愁
-
近来许多大数据分析、网络社群方面的PPT，特别喜欢使用多边形网格作为修饰，借以表示连接、关系、节点等抽象概念，比如▼虽然使用PPT自带的图形工具也能做出来，但是纯手工绘制那是相当耗时耗力，谁用谁知道▼...
- 谷歌最强推理模型gemini2.5pro登场，强的离谱~
-
25号晚上，谷歌直接放了一个大招，直接推出了gemini2.5pro的下一代推理模型。强到什么程度，据官网介绍的，在一系列需要高级推理的基准测试中都处于领先地位，并且是甩掉了后面模型一大截的差距。就好...
- 设计大神不传之秘，这个PPT隐藏的排版神器，让你提前1小时下班
-
最近好多学员在群里给我吐槽，说做工作汇报的时候经常碰到一大堆文字的时间轴页面，不管怎么排版都感觉又乱又丑，一眼看不到重点，就像这样：如果随便找一张模板套上去，很有可能显得浮夸：不如找来一张折线图，上升...
- 网站分享 | 想要作品有创意?不如学学如何玩转半色调吧
-
正当你想要为自己的设计作品增添新的创意元素发愁时，不如试试「半色调」能否给你带来新的灵感！什么是半色调？半色调又称灰度级，它是反映图像亮度层次、黑白对比变化的技术指标。也就是通过运用点、条纹或其他形...
- 想做半色调+低多边形+条纹效果?这个网站帮你一键生成!
-
如果想要为设计作品增添一些新意的元素，或许今天这个「矢量半色调」网站能带给你一些启发！什么是「半色调」效果呢，「半色调」是指运用点、条纹或其他形状的图案，根据元素大小或者疏密的不同，从而构成从远处看起...
- Excalidraw-免费的白板应用，能够画各种流程图架构图
-
一款完全免费的手绘风格绘图在线应用，能快速画出漂亮的流程图、示意图甚至是图表。关于ExcalidrawExcalidraw是一款轻量的手绘风格电子白板在线应用，无论是Windows/macO...
- 时间轴动画怎么加才惊艳?简单，腾讯御用PPT设计师直接爆料
-
大家应该收集或者见过很多不错的时间轴的页面设计吧？时间轴算是PPT制作中经常遇到的页面类型，个人述职、项目路演、企业介绍等等，都会用到时间轴来让用户更加直观地了解个人或公司。比如腾讯的时间轴页：又比如...
- 图片无限放大也不会模糊的秘密，矢量图的那些事
-
当你想在你的文档或者幻灯片中插入一个图片，感觉图片太小排版不太美观，我们放大一下图片，发现图片因为放大而变得模糊，严重影响视觉感受。这个视频我会告诉如何让图片放大、再放大都不会失真的方法。首先我们先来...
- 用热搜的方式打开推文?
-
热搜，向来是全民瞩目的焦点。要是把热搜元素融入到推文之中，那推文的趣味性必定直线上升！想必大家都很好奇，怎样在SVG交互推文中打造出热搜效果呢？不少品牌方账号中，90%以上的内容都采用了SVG，交...
- 羊角螺线如何应用到平面设计中?
-
羊角螺线是一段数学函数曲线。多用作缓和曲线，缓和直路线与圆曲路线之间曲线变化的作用。羊角螺线的特点是，从坐标原点开始，起始曲率为0，函数曲线的曲率呈线性增长。也就是说，羊角螺线可以完美链接直线与任何圆...
- cad转svg的软件有哪些?为你介绍这四个软件
-
cad转svg的软件有哪些？CAD（计算机辅助设计）是一种广泛使用的工具，用于创建和修改设计图纸。SVG（可缩放矢量图形）是一种开放标准，用于在Web上显示矢量图形。CAD转SVG是将CAD图纸转换为...
- 图片格式那么多，哪种更适合你?
-
本文介绍和比较几种常见图片文件格式的优缺点，并介绍不同的文件格式对Web应用程序性能的影响。有损vs无损图片文件格式有可能会对图片的文件大小进行不同程度的压缩，图片的压缩分为有损压缩和无损压缩两种。有...
- 一篇文章教会你使用SVG 画多边形
-
作者：前端进阶者来源：前端进阶学习交流大家好，我是前端进阶者。polygon元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状，最后一点连接到第一点。元素通常用于绘制具有多个(3个或更多)...
- SVG 绘制曲折线
-
本节我们来学习如何在SVG中绘制曲折线，绘制曲折线可以使用<polyline>元素来实现。如何绘制曲折线曲折线就是通过一系列的直线连接多个点，然后组合成任意形状。曲折线可以通过S...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 基础教程 (29)
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)