SVG 是绘制户型图最可控、可缩放、可交互的方案，因其支持语义化标签、CSS 样式、JS 事件及无障碍属性，优于 Canvas 和 div 布局。
用 SVG 画户型图比 Canvas 或 div 布局更靠谱
直接用 <svg> 描述墙体、门窗、房间，是目前最可控、可缩放、可交互的方案。Canvas 渲染后无法选中单个元素，div 布局对斜线墙、弧形窗等支持极差，而 SVG 的 <path> 和 <rect> 能精准表达任意轮廓，且天然支持 CSS 样式、JS 事件绑定和无障碍属性。
实操建议：
- 把户型图 CAD 或 Sketch 导出为 SVG（推荐用 Inkscape 手动清理冗余节点）
- 保留关键语义：给每个房间加
id="room-living"、class="room"；墙体统一用class="wall" - 避免内联
style="fill:#ccc"，改用外部 CSS 控制主题色、高亮态 - 如果原始 SVG 过大，用
viewBox替代固定width/height，保证响应式缩放
点击房间高亮并显示面积信息要监听 click 事件，不是 hover
移动端没 hover，且户型图常需在平板/小程序里使用，click 是唯一可靠触发方式。但 SVG 元素默认不触发事件，容易漏掉这步。
常见错误现象：document.querySelector('#room-kitchen').addEventListener('click', ...) 绑定了却没反应。
立即学习“前端免费学习笔记（深入）”；
原因和修复：
-
<g>或<path>没设cursor: pointer，视觉无反馈 → 加 CSS：.room { cursor: pointer; } - 父容器有
pointer-events: none→ 检查外层<svg>或包裹<div>的样式 - 房间区域是镂空路径（比如带阳台缺口），
fill="none"导致点击穿透 → 改成fill="transparent"或加pointer-events: visibleFill - 面积数据建议存在
data-area="28.5"属性里，避免 JS 硬编码
移动端缩放卡顿？禁用 touch-action: none 并加 viewport 限制
很多开发者为“防止误触”在 SVG 外层加了 touch-action: none，结果导致双指缩放失效、拖拽卡顿。户型图需要自由缩放查看细节，这个限制必须去掉。
正确做法：
- 移除所有
touch-action: none，让浏览器默认处理手势 - 在
<head>中确保 viewport 设置合理：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes"> - 如需禁止横向滚动，用 CSS：
body { overflow-x: hidden; }，而不是锁死 touch-action - 若 SVG 内部元素太多（>200 个 path），考虑用
transform: scale()替代重绘整个 DOM，性能更好
导出 PNG 时文字模糊？用 canvg + html2canvas 不如直接 SVG-as-Image
试图用 html2canvas 截图 SVG，常出现文字锯齿、字体丢失、比例错乱。根本原因是 html2canvas 对 SVG 渲染支持不完整，尤其跨域字体或 system-ui 字体。
更稳的方案是利用浏览器原生能力：
- 将 SVG 字符串转为 Blob URL：
URL.createObjectURL(new Blob([svgString], {type: 'image/svg+xml'})) - 创建
<img>加载该 URL，再用canvas.drawImage()绘制 → 文字清晰、无字体 fallback 问题 - 注意：
svgString必须包含完整 XML 声明和命名空间，例如开头是<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" ...> - 如果服务器不允许 Blob URL（如某些 WebView），退回到服务端渲染 SVG → PNG，前端只传参数
真正麻烦的不是画出形状，而是让每堵墙的厚度一致、每扇门的开启方向可配置、每间房的名称能随语言切换——这些都得靠结构化数据驱动 SVG，而不是手写 path。别省那一步建模。
