SVG与Canvas混合渲染是根据能力分工：SVG负责需交互、缩放的结构元素，Canvas处理大数据量动态内容，通过坐标对齐、层级隔离和事件桥接实现协同。
SVG与Canvas混合渲染不是简单地把两者叠在一起，而是根据各自能力分配任务，让界面既清晰可交互，又流畅不卡顿。
为什么需要混合？
单用SVG，画几千个圆或路径时DOM树迅速膨胀，鼠标悬停、点击响应变慢；单用Canvas，缩放失真、文字模糊、无障碍支持弱，改一个图标都要重绘整帧。混合的本质是“各干各的活”：
- SVG负责结构明确、需交互、要缩放的部分：坐标轴、图例、按钮、文字标签、画框边框
- Canvas负责数量大、变化快、像素级控制的部分：粒子轨迹、实时热力点、动态文本流、亚麻纹理底图
关键协同机制
混合成功与否，取决于三层对齐：
-
坐标对齐：Canvas的
ctx.setTransform()需与SVG的viewBox和容器尺寸严格同步，否则拖拽缩放时元素错位 -
层级隔离：用
z-index+isolation: isolate确保Canvas层重绘不触发SVG重排，SVG样式变更不影响Canvas帧率 -
事件桥接：Canvas内不可直接绑定click，需监听Canvas区域，再通过SVG元素的
getScreenCTM()反算鼠标落在哪个SVG节点上
典型落地场景
几个已验证有效的组合方式：
- 富文本编辑器（如canvas-editor）：Canvas绘制正文段落与光标，SVG包裹表格边框、公式符号、嵌入图片——保证公式缩放不失真，正文滚动不闪屏
- 工业组态看板：SVG绘制固定拓扑连线与设备图标，Canvas叠加实时温度云图与报警闪烁点——连线永远锐利，云图每秒更新无压力
- AI绘画UI（如圣光艺苑）：Canvas生成动态亚麻纹理底层，SVG绘制鎏金画框与手写体控件，顶层CSS注入Poetic UI——艺术感由矢量承载，氛围感由像素营造
避坑提醒
实际开发中容易忽略但影响深远的细节：
- Canvas画布尺寸必须用
width/height属性设置，不能只靠CSS缩放，否则高DPI设备下严重模糊 - SVG中
<foreignObject>嵌入HTML内容时，其内部Canvas无法继承SVG的transform，需单独做坐标补偿 - 混合渲染后导出为PDF或PNG，Canvas内容需
toDataURL()转图，SVG部分可用XMLSerializer序列化，二者需手动合成
