为梁力学演示在 SVG 中渲染应力热力图

热力图要说清什么

当梁发生弯曲时，一侧被拉伸，另一侧被压缩。截面内部的应力并不均匀：它在最外缘最大，并沿中部、即中性轴处降到零。一张好的热力图，要让这种梯度一眼可见——上下边缘颜色最强，中央颜色最淡。

信息保持简单。对教学演示，你只需要一件事：一条清楚地把"这块有多吃力"编码出来的色标。图中其余一切都为它服务。

一道渐变，一个裁剪

整个技法就两块 SVG。先定义一道从截面一侧到另一侧的 linearGradient：顶部一个代表受压的色标、中性轴处一个浅色标、底部一个代表受拉的色标。再定义一个装着梁自身轮廓的 clipPath。

<linearGradient id="stress" x1="0" y1="0" x2="0" y2="1">
  <stop offset="0"   stop-color="#2563eb"/>
  <stop offset="0.5" stop-color="#eef2f7"/>
  <stop offset="1"   stop-color="#be123c"/>
</linearGradient>

<rect x="120" y="110" width="480" height="60"
      fill="url(#stress)" clip-path="url(#clip-beam)"/>

用一个普通矩形承载那道渐变，并以零件形状裁剪它。渐变始终是一条简单的两到三色标斜坡；复杂的造型工作全交给形状。若梁变了，只需改裁剪路径。

让颜色与物理挂钩

颜色应当对读者有可验证的含义，且能对回力学。对弯曲而言，双极色标是诚实的选择：一种色相给受压侧，另一种给受拉侧，中间夹一条中性的浅色带。如果你改用单色相从深到浅的斜坡，就等于暗示应力永远只有一种符号，而这对受弯截面是错的。

• 加上中性轴。一条虚线中线，把渐变锚定到它所属的截面。
• 给色标两端加文字。用词语而非仅颜色，让色标在色盲与灰度打印下依然成立。
• 把轮廓留在最上层。在热力图之后描出零件边缘，形状就永远不会消融进颜色里。

想要的话，让加载动起来

静止的热力图本身就已经在教了。若要加动效，就动载荷，别动颜色：让载荷箭头生长，并随着力增大，让第二道更深的渐变叠上来。颜色于是读成载荷的结果，而不是一个自顾自移动的装饰。