SVG 绘制多边形

作者: 暖A暖 | 来源:发表于2021-01-12 10:48 被阅读0次

SVG
SVG 绘制多边形
无标题文章
HTML5 Canvas笔记——Canvas绘制多边形
H5 新特性05
Iconfont应用规范
iOS-加载SVG类型的图片并且实现可点击长按功能
Opencv绘制多边形不显示
Android自定义View实现蛛网控件
SVG用法

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

如何绘制多边形

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

示例：

例如绘制一个六边形：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg width="500" height="500">
            <polygon points="100,30 140,50 140,90 100,110 60,90 60,50" style="fill:#5cabcf; stroke: #e07cc2; stroke-width:3px;"></polygon>
        </svg>
    </body>
</html>

在浏览器中的演示效果为：

绘制一个五角星

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

示例：

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg width="500px" height="500px">
            <polygon points="100,20 40,180 180,80 10,80 150,180" style="fill:#5cabcf; stroke: #e07cc2; stroke-width:3px;" ></polygon>
        </svg>
    </body>
</html>

在浏览器中的演示效果为：