SVG 绘制曲折线

myzbx 2025-04-27 15:07 9 浏览

本节我们来学习如何在 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>

在浏览器中的演示效果：

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

SVG 直线

上一篇：Markdown(编辑器)工具与使用总结
下一篇：一篇文章教会你使用SVG 画多边形

SVG 绘制曲折线

如何绘制曲折线

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

示例：

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」