Architecto是第三方建筑可视化插件，非HTML/CSS原生功能；需通过JS初始化、特定class结构及主题配置生效，依赖容器尺寸、SVG viewBox和主题scale三者严格匹配才能正确对齐。
architecto 不是 html 的原生功能，也不是浏览器支持的 css 框架或标准布局工具——它是个第三方建筑可视化插件（或主题包），通常运行在 wordpress 或定制 cms 上。直接用纯 html + css 无法“调用 architecto 对齐建筑图”，必须依赖其提供的 js 初始化逻辑、特定 class 结构和主题配置项。
Architecto 主题设置必须通过 architecto_init() 或 wp_enqueue_script 加载
常见错误是把 Architecto 当成普通 CSS 类写在 <div class="architecto-grid"> 里就以为生效了。实际它依赖 JavaScript 动态计算层高、缩放比、轴测角度，初始化失败时建筑图会错位、重叠或不响应鼠标拖拽。
- WordPress 环境下，必须在主题的
functions.php中用wp_enqueue_script注入architecto.min.js和配套 CSS，且确保 jQuery 已先加载 - 独立 HTML 页面需手动引入官方提供的完整 bundle，顺序不能错：
architecto-core.js→architecto-theme-architecto.js→ 自定义初始化脚本 - 初始化时若漏传
theme参数（如theme: 'architecto'），默认用基础 theme，建筑图的阴影、标尺、图层对齐都会偏移
data-architecto-align 属性控制单图对齐，但只在初始化后生效
这个属性不是 CSS align-items 的替代品，而是 Architecto 内部解析的指令。设成 "center" 或 "top-left" 后，JS 会在渲染阶段重新计算 SVG 节点坐标，而不是靠 CSS transform 强行拉扯。
- 支持值只有：
"center"、"top-left"、"bottom-right"；设成"middle"或"flex-end"会被静默忽略 - 必须写在 Architecto 容器元素上，例如：
<div data-architecto-align="center" id="floor-plan-1">；写在子<img>上无效 - 如果图是异步加载（比如 AJAX 获取的 SVG 字符串），得在插入 DOM 后手动调用
Architecto.refresh('#floor-plan-1')，否则data-architecto-align不触发
建筑图错位的 3 个真实原因：尺寸未声明、SVG viewBox 不匹配、主题 scale 冲突
对齐失败极少是因为代码写错，更多是底层数据与主题预设不一致。Architecto 假设所有建筑图按统一比例建模，一旦打破，整个对齐逻辑就崩。
- HTML 容器没设固定宽高（如
width: 800px; height: 600px），Architecto 会按窗口宽度自适应，导致不同楼层平面图缩放不一致 - 原始 SVG 缺少
viewBox="0 0 1200 800"或数值与实际像素尺寸不符，Architecto 读取后计算出的单位长度错误，轴测旋转后位置漂移 - 主题设置里的
scale（如architecto-theme-config.js中的defaultScale: 0.75）被多个页面共用，但某张图是按 1:1 导出的，结果被强制缩小再对齐，视觉上像“往左上角缩进”
真正卡住人的地方，往往不是怎么写初始化代码，而是搞不清哪一层在控制对齐：是 HTML 容器尺寸？SVG 元数据？JS 主题配置？还是 Architecto 内部的 canvas 坐标系？这几个层面一旦有任意一个没对齐，图就“看起来差不多但就是不对”。
立即学习“前端免费学习笔记（深入）”；
