如何用SVG制作面积图（没有JS）

Question

我必须使用HTML，SVG和CSS制作面积图;我知道如何制作折线图，但我不知道如何填充线下方的区域。

我知道使用d3（或其他JS库）是正确的方法，但是现在我必须避免使用JS（这是大学的“家庭作业”）。

图表的结构是：在横轴上我有增量值（0,1,2，...），在纵轴上我有我的值。

Answer 1

这是学习如何在JS中创建路径对象的一个​​很好的练习。路径对象在“d”属性中从一个点到另一个点行走。

查看w3学校页面 - https://www.w3schools.com/graphics/svg_path.asp和这个stackoverflow答案 - Scripting <path> data in SVG (reading and modifying)

填充下方要求您将路径一直延伸到轴，以便形成完整的形状。在线尝试一些例子来感受它。