国清寺

这张图是怎么做出来的

从一张景区照片到可交互的手绘 SVG，五步。整张图没有用任何图片资源 —— 全部由数据实时绘制。

1. 把图读成数据，而不是描图

   先把照片上的每个标注抄成一条记录：中文名、英文名、分类、十景编号、相对坐标。坐标以图幅左上角为原点，量出来的像素直接除以图宽再乘画布宽即可。这一步决定了后面一切都能程序化生成。

2. 定一套画布坐标系

   用 viewBox="0 0 1280 1040" 建立与原图同比例的虚拟坐标。之后所有点位、水系、路网都写在这个坐标系里，缩放平移只改一个 transform，永远不糊。

3. 用「种子抖动」造手绘线

   手绘感的来源不是滤镜，是线条的不规则。做法：把每条折线重采样成密集点，沿法线方向加一点确定性随机偏移，再用二次贝塞尔连成平滑曲线；同一条线画两遍、第二遍换个种子并降低不透明度，就有了铅笔复描的味道。种子固定，所以每次刷新图形完全一致。

4. 把建筑抽象成可复用图元

   中式殿堂 = 起翘的檐口曲线 + 正脊 + 台基；塔 = 若干层收分的檐；亭 = 小顶加四柱；碑 = 圆首方趺。写成几个参数化函数（宽、高、层数），34 个点位就都能由分类自动画出来。

5. 交互挂在结构上，不挂在像素上

   每个点位是一个 <g class="poi" data-id>，天然可点击、可高亮、可筛选。路线动画用 getPointAtLength() 沿真实路径推进，配合 stroke-dashoffset 让墨迹一点点洇开。搜索只是对数据数组做匹配，再把命中点位居中。

替换成你自己的景区：只改文件里 POIS / WATER / LANES 三个数组即可，渲染与交互代码不用动。
图中位置为示意性还原，用于表达点位关系与游览顺序，不作导航依据；文字简介为参考性内容，以景区现场说明为准。
景点照片：站内自摄，并采 Wikimedia Commons 共享素材（CC 授权）。