SVG 绘制曲折线（svg绘制线段）

moboyou 2025-07-16 04:03 11 浏览

本节我们来学习如何在 SVG 中绘制曲折线，绘制曲折线可以使用 <polyline> 元素来实现。

如何绘制曲折线

曲折线就是通过一系列的直线连接多个点，然后组合成任意形状。曲折线可以通过 SVG 中的 <polyline> 元素来绘制。<polyline> 元素中的 points 属性用于定义绘制折线所需的点列表，即 x 和 y 坐标对。x 坐标和 y 坐标之间使用逗号分隔，坐标对之间使用空格分隔。

语法格式：

<polyline points="x1,y1 x2,y2 x3,y3 ... xn,yn"></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="500px" height="500px">
            <polyline points="20,20 20,100 100,100 100,200 200,200" style="fill:none; stroke: #5ae6b7; stroke-width:3px;"></polyline>
        </svg>
    </body>
</html>

在浏览器中的演示效果：

曲折线会默认有一个黑色的填充色，如果要去掉这个填充色，可以将 fill 属性设置为 none。然后通过 stroke 属性设置曲折线的颜色，stroke-width 设置曲折线的宽度。

绘制一个带有填充色的梯形

我们已经知道了曲折线会默认带有一个黑色的填充色，这说明我们可以通过 fill 属性自己重新定义曲折线的填充色。

示例：

绘制一个紫色的梯形折线：

<!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">
            <polyline points="20,150 50,50 150,50 180,150" style="fill:#d995eb; stroke: #5ae6b7; stroke-width:3px;"></polyline>
        </svg>
    </body>
</html>

在浏览器中的演示效果：

上图中，紫色部分就是曲折线的填充颜色，绿色是曲折线的线条颜色。可以明显看到，曲折线之间是不闭合的。

html画折线图

上一篇：Axure教程:高保真数据可视化原型（axure数据可视化模型）
下一篇：翻以前的文章，发现这个双折线图，惊艳到我了

SVG 绘制曲折线（svg绘制线段）

如何绘制曲折线

绘制一个带有填充色的梯形

示例：

相关推荐

Linux环境中查看Oracle错误和警告日志信息

絮语----工作四年的碎碎念

SQL 中的 (+)用法

oracle常见问题处理

MYSQL经典面试题汇总

医院信息系统突发应急演练记录

Windows 11:已知问题和已解决问题列表(更新时间:2022年1月)

最全面的IBMS系统集成系统技术规格书，赶紧收藏起来!

苹果停止更新Windows版QuickTime!

Linux下开源BI工具Metabase本地化安装及配置详解