https://domal.cc/tags/%E5%9B%BE%E5%BA%93/ Domal Hugo -- gohugo.io https://domal.cc/thinking/%E6%97%B6%E9%97%B4%E8%BD%B4%E8%AE%BE%E6%83%B3/ Wed, 12 Aug 2026 18:00:00 +0800 https://domal.cc/thinking/%E6%97%B6%E9%97%B4%E8%BD%B4%E8%AE%BE%E6%83%B3/ <p>阿里技术大事记时间轴 Html 复刻方案</p>
<h1 id="html可视化时间轴复刻实践分享">HTML可视化时间轴复刻实践分享</h1>
<h2 id="一开发背景">一、开发背景</h2>
<p>偶然看到一款双层分流式技术大事记时间轴设计图，整体曲线脉络、上下分层事件卡片、竖排年份标注的视觉形式表现力很强，适合用来展示企业多年技术发展里程碑，于是决定使用原生 HTML/CSS/SVG 进行页面复刻。
本次复刻没有做到像素级一比一还原，但视觉结构、分层逻辑、矢量绘图核心效果已高度贴近原图，仍有细节优化空间。</p>
<p><img src="https://p11-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/10e40536619141a89e0c5a47fc93f760.png~tplv-a9rns2rl98-image-qvalue.image?lk3s=8e244e95&rcl=20260813145004D0DEFD984F0C6ACA93F1&rrcfp=1860f75c&x-expires=1787208604&x-signature=yk9IF6ByhAkzGsI9pbhdKBPpLoU%3D" alt="参考"></p>
<h2 id="二整体技术选型">二、整体技术选型</h2>
<p>整体采用<strong>无第三方依赖原生前端方案</strong>，轻量化、可直接在浏览器打开运行，适配大屏展示场景：</p>
<ol>
<li><strong>HTML5</strong>：语义化结构承载标题、年份事件卡片，划分上下两层事件轨道；</li>
<li><strong>CSS3</strong>：变量管理主题色、绝对定位布局、文字竖排、响应式横向滚动、多层元素层级控制；</li>
<li><strong>原生 SVG</strong>：绘制全部时间主线、分支连接线、节点圆点，矢量图形放大不失真；</li>
<li>不引入 JS、图片、外部样式表，所有逻辑与视觉全部内联在单文件中，打包、分发、使用更便捷。</li>
</ol>
<h2 id="三复刻过程中的核心难点与解决方案">三、复刻过程中的核心难点与解决方案</h2>
<h3 id="1-多层曲线时间脉络绘制svg难点">1. 多层曲线时间脉络绘制（SVG难点）</h3>
<h4 id="难点">难点</h4>
<p>原图时间轴并非单一直线，是多条交错弯折的折线路径，同时区分主视觉蓝线与灰色辅助线；每条年份节点需要垂直连线连接上下事件卡片，还要区分普通节点与终点标识圆点，手动编写路径坐标极易错位。</p>
<h4 id="解决方案">解决方案</h4>
<ul>
<li>分层编写 <code><path></code>，区分 <code>.blue</code> 主线、<code>.thin</code> 细蓝辅助线、<code>.grey</code> 灰色分层线，视觉层次和原图对齐；</li>
<li>统一规划节点坐标，先标记所有年份对应圆点位置，再批量编写垂直连接线，保证卡片和主线一一对应；</li>
<li>用两类 <code>circle</code> 区分普通节点与蓝色终点圆点，强化视觉收尾。</li>
</ul>
<h3 id="2-上下双层事件卡片定位排版">2. 上下双层事件卡片定位排版</h3>
<h4 id="难点-1">难点</h4>
<p>设计分为 <code>top</code> 上层、<code>bottom</code> 下层两条事件流，同年份可同时存在上下两条记录；所有卡片使用绝对定位，坐标偏移细微就会出现文字重叠、年份文字和主线脱节；竖排年份文字需要紧贴节点左侧，排版容错率极低。</p>
<h4 id="解决方案-1">解决方案</h4>
<ul>
<li>区分 <code>.entry.top</code> / <code>.entry.bottom</code> 两套定位规则，分别控制上下卡片距离主线的间距；</li>
<li>单独为竖排年份 <code>.year</code> 设置 <code>writing-mode: vertical-rl</code>，独立层级不遮挡正文；</li>
<li>多轮视觉校正微调 left、bottom/top 坐标，新增多组修正样式，避免卡片互相遮挡；</li>
<li>为不同长度文案的卡片设置差异化固定宽度，防止文字溢出错乱。</li>
</ul>
<h3 id="3-主题色彩统一管理与样式复用">3. 主题色彩统一管理与样式复用</h3>
<h4 id="难点-2">难点</h4>
<p>页面多处复用深蓝主色、浅蓝标注色、灰色辅助线，分散写颜色值后期修改成本极高；页面包含标题、年份、正文、标记文字多种字号，样式零散难以维护。</p>
<h4 id="解决方案-2">解决方案</h4>
<ul>
<li>使用 CSS <code>:root</code> 定义全局颜色变量 <code>--blue</code>/<code>--sky</code>/<code>--ink</code>/<code>--line</code>，全局一处修改即可更换整套配色；</li>
<li>统一封装 <code>.mark</code> 标记类，用于突出飞天FT3等核心项目标识；</li>
<li>层级分层控制 z-index：SVG底层曲线 → 年份文字层 → 事件卡片正文，解决元素遮挡问题。</li>
</ul>
<h3 id="4-宽幅画布适配与滚动兼容">4. 宽幅画布适配与滚动兼容</h3>
<h4 id="难点-3">难点</h4>
<p>完整时间轴画布宽度超过常规屏幕尺寸，直接展示会裁切右侧年份事件；窄屏设备无法完整浏览全部时间线。</p>