如何仅用HTML、SVG和CSS制作无JS的面积图？

嘿，这个需求完全可以搞定！既然你已经会做折线图，那只需要在折线的基础上把路径闭合，再给路径加上填充就能得到面积图了，全程不用JS，纯SVG+CSS就够。

核心思路 #

面积图的本质是闭合的路径：你先画好折线的各个数据点，然后从折线的最后一个点连到横轴的对应位置，再从横轴连回折线的起点，形成一个封闭区域，最后给这个区域设置填充色就OK了。

完整示例代码 #

下面是一个横轴为0-8、纵轴对应目标数值的面积图示例，你可以直接套用，然后替换成自己的数据：

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制坐标轴 -->
  <line x1="30" y1="170" x2="370" y2="170" stroke="#333" stroke-width="2"/>
  <line x1="30" y1="30" x2="30" y2="170" stroke="#333" stroke-width="2"/>
  
  <!-- 面积路径：折线 + 闭合到横轴 -->
  <path 
    d="M 30 170       <!-- 起点：横轴0对应的位置 -->
       L 70 120       <!-- 横轴1对应的数值点 -->
       L 110 90       <!-- 横轴2对应的数值点 -->
       L 150 140      <!-- 横轴3对应的数值点 -->
       L 190 80       <!-- 横轴4对应的数值点 -->
       L 230 60       <!-- 横轴5对应的数值点 -->
       L 270 100      <!-- 横轴6对应的数值点 -->
       L 310 70       <!-- 横轴7对应的数值点 -->
       L 350 130      <!-- 横轴8对应的数值点 -->
       L 350 170      <!-- 连到横轴8的位置 -->
       Z"             <!-- 闭合路径，回到起点 -->
    fill="#42a5f5" 
    stroke="#1e88e5" 
    stroke-width="2"
    opacity="0.7"
  />
  
  <!-- 可选：单独绘制折线（让线条更清晰） -->
  <path 
    d="M 30 170 
       L 70 120 
       L 110 90 
       L 150 140 
       L 190 80 
       L 230 60 
       L 270 100 
       L 310 70 
       L 350 130"
    stroke="#1e88e5" 
    stroke-width="2"
    fill="none"
  />
  
  <!-- 横轴刻度标签 -->
  <text x="30" y="190" text-anchor="middle" font-size="12">0</text>
  <text x="70" y="190" text-anchor="middle" font-size="12">1</text>
  <text x="110" y="190" text-anchor="middle" font-size="12">2</text>
  <text x="150" y="190" text-anchor="middle" font-size="12">3</text>
  <text x="190" y="190" text-anchor="middle" font-size="12">4</text>
  <text x="230" y="190" text-anchor="middle" font-size="12">5</text>
  <text x="270" y="190" text-anchor="middle" font-size="12">6</text>
  <text x="310" y="190" text-anchor="middle" font-size="12">7</text>
  <text x="350" y="190" text-anchor="middle" font-size="12">8</text>
</svg>

关键细节说明 #

1. 坐标换算：SVG的y轴是向下递增的，所以你的纵轴目标数值越大，对应的y坐标要越小。比如示例里纵轴高度是140（从y=30到y=170），如果你的目标数值范围是0-100，那1单位数值对应1.4像素的高度，换算公式就是：SVG y坐标 = 170 - (目标数值 * 1.4)。
2. 路径闭合：路径里的Z指令会自动把最后一个点连回起点，不用手动写L 30 170。
3. 样式优化：给填充色加一点opacity可以让图表更柔和，也可以用线性渐变代替纯色填充，比如：

   <defs>
     <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
       <stop offset="0%" stop-color="#42a5f5" stop-opacity="0.8"/>
       <stop offset="100%" stop-color="#42a5f5" stop-opacity="0.3"/>
     </linearGradient>
   </defs>
   <!-- 然后把path的fill改成url(#areaGradient) -->
   

4. 可维护性：可以把样式抽到CSS里，比如给面积路径加个类.area-chart__area，然后在CSS里设置样式，这样修改起来更方便。

内容的提问来源于stack exchange，提问作者StormPooper