当前位置：主页 > 查看内容

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

发布时间：2021-04-21 00:00| 有 位朋友查看

简介：大家好，我是前端进阶者。 polygon元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状，最后一点连接到第一点。 元素通常用于绘制具有多个(3个或更多)侧面/边缘的形状。 一、 Polygon 画多边形 简单的SVG多边形: 例 !DOCTYPEhtml htmllang= en hea……

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

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

一、 Polygon 画多边形

简单的SVG多边形:

例

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>Document</title> 
  6.   <body style="background-color: aqua;"> 
  7.  
  8.  
  9. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  10.  
  11. <polygon points="10,0 60,0 35,50" style="stroke:#660000; fill:#cc3333;" /> 
  12. </svg> 
  13.  
  14. </body> 
  15. </html> 

运行后效果如下:

解析：

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

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

二、绘制不规则四边形

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

下面是SVG代码：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <body style="background-color: aqua;"> 
  4.  
  5. <svg height="250" width="500"> 
  6. <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" /> 
  7. </svg> 
  8.  
  9. </body> 
  10. </html> 

三、绘制六边形

代码如下:

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>Document</title> 
  6.     <body style="background-color: aqua;"> 
  7. <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;"> 
  8. <polygon points="60,20 100,40 100,80 60,100 20,80 20,40" /> 
  9. </svg> 
  10.  
  11. </body> 
  12. </html> 

运行效果如下：

四、八边形

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

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>Document</title> 
  6.   <body style="background-color: aqua;"> 
  7. <svg xmlns="http://www.w3.org/2000/svg"           xmlns:xlink="http://www.w3.org/1999/xlink"> 
  8. <polygon points="50,5   100,5 125,30 125,80 100,105 
  9.                    50,105 25,80 25, 30" style="stroke:#660000; fill:#cc3333; stroke-width: 3;" /> 
  10. </svg> 
  11.  
  12. </body> 
  13. </html> 

运行效果如下：

五、SVG 画五角星

案例

使用 元素创建一个星型:

代码如下:

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>Document</title> 
  6.     <body style="background-color: aqua;"> 
  7. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320"> 
  8. <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red; stroke:purple; stroke-width:5;fill-rule:nonzero;"/> 
  9. </svg> 
  10.  
  11. </body> 
  12. </html> 

运行后效果如下:

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

下面是SVG代码：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>Document</title> 
  6. <body style="background-color: aqua;"> 
  7. <svg height="210" width="500"> 
  8. <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> 
  9. </svg> 
  10.  
  11. </body> 
  12. </html> 

运行效果：

六、总结

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

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

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


本文转载自网络，原文链接：https://mp.weixin.qq.com/s/41o-uFZHZ0ggOrs4sQxltg
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：鸿蒙基于图像模块实现图库图片的四种常见操作开发分享 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐