SVG 绘制多边形

本节我们来学习如何在 SVG 中绘制多边形,多边形就是由三条或三条以上的线段首尾顺次连接所组成的平面图形。

如何绘制多边形

绘制多边形可以使用 SVG 中的 元素,通过元素中的 points 属性确定各个点的位置,和 元素差不多。

示例:

例如绘制一个六边形:



    
        
        SVG学习(9xkd.com)
        
    
    
        
            
        
    
     

在浏览器中的演示效果为:
SVG 绘制多边形_第1张图片

绘制一个五角星

通过控制 points 属性的值,我们可以绘制各种图形,例如下面我们绘制一个五角星。

示例:

五角星看着是挺复杂的,其实我们只需要确定好五角星的五个角的坐标点,根据我们平时画五角星的顺序,然后填充颜色和描边,就能呈现出如下图所示效果啦:



    
        
        SVG学习(9xkd.com)
        
    
    
        
            
        
    
     

在浏览器中的演示效果为:
SVG 绘制多边形_第2张图片

你可能感兴趣的:(svgjavascript前端)