SVG 与 Canvas 协同的关键是分工：Canvas 负责实时像素绘制，SVG 提供 GPU 加速滤镜（如 <feGaussianBlur>）或 CSS 混合模式；避免频繁读写像素、复用渲染目标，并预热 SVG 滤镜以保障性能。
SVG 和 Canvas 在 HTML5 中可以协同工作，但要注意：它们的混合模式与滤镜机制本质不同，直接“结合实现高性能滤镜混合模式”需明确分工——Canvas 负责实时像素计算与合成，SVG 负责矢量图形、CSS 混合模式（如 mix-blend-mode）或作为滤镜定义容器（<filter>）。真正高性能的关键在于避免频繁读写像素、合理复用渲染目标、并利用浏览器对 SVG 滤镜的硬件加速能力。
用 SVG <filter> 定义 GPU 加速滤镜，Canvas 绘制后叠加 SVG 图层
这是最实用的“结合”方式：Canvas 承担动态内容绘制（如视频帧、粒子动画），SVG 提供声明式、可复用的滤镜效果（如模糊、颜色矩阵、光照），通过 <feColorMatrix> 或 <feGaussianBlur> 实现，浏览器会自动启用 GPU 优化。
- 将 Canvas 元素包裹在 SVG 的
<foreignObject>中（兼容性有限），或更稳妥地——把 Canvas 作为普通 DOM 元素，用 CSS 定位 +mix-blend-mode与 SVG 滤镜图层混合 - 示例：Canvas 渲染摄像头流，上方覆盖一个透明 SVG
<rect>，应用filter: url(#glow)，其中<filter id="glow"><feGaussianBlur stdDeviation="4"/></filter> - 优势：滤镜由浏览器原生处理，不触发 Canvas
getImageData()，无 JS 像素遍历开销
Canvas 2D 上模拟常见混合模式（multiply, screen, overlay）
当需要像素级精确控制（如图像编辑器），可在 Canvas 2D 上手动实现混合逻辑，比 WebGL 更轻量且兼容性好。
- 使用
ctx.globalCompositeOperation = "multiply"可直接调用内置混合模式，适用于图层间合成（但仅限于预设模式，不可自定义滤镜） - 对自定义滤镜（如非线性色调映射），先用
ctx.getImageData()获取源数据，再用 TypedArray（如Uint8ClampedArray）批量处理像素——注意：务必在离屏 Canvas（OffscreenCanvas）中做计算，避免阻塞主线程 - 关键优化：缓存中间结果、复用 ImageData 对象、用
putImageData(data, 0, 0, 0, 0, width, height)指定区域更新，减少全画布重绘
用 SVG 滤镜作为 Canvas 纹理输入（WebGL 风格管线）
进阶方案：把 SVG 滤镜输出“渲染为位图”，再作为纹理传入 WebGL Canvas，构建完整滤镜管线。虽非纯 HTML5 2D，但能真正实现高性能可编程滤镜。
立即学习“前端免费学习笔记（深入）”；
- 原理：将带滤镜的 SVG 元素绘制到一个临时 Canvas（
svgElement.getBoundingClientRect()+ctx.drawImage(svg, ...)），此时滤镜已生效并光栅化 - 该 Canvas 可作为
texImage2D的源，供 WebGL 片元着色器进一步处理（如叠加 LUT、动态 vignette） - 适合需求：实时视频美颜、AR 滤镜、多级风格迁移——SVG 处理基础效果（去噪/锐化），WebGL 处理复杂着色
避免常见性能陷阱
很多“结合失败”源于误用场景或忽视底层机制。
- 不要在每帧中重复创建 SVG
<filter>元素——定义一次，全局复用 ID 引用 - 避免在 Canvas 中频繁切换
globalCompositeOperation，每次切换可能触发渲染状态重置 - Canvas
drawImage()绘制 SVG 时，若 SVG 含大量路径或滤镜，首次绘制可能卡顿——可提前绘制一次到离屏 Canvas 预热 - 移动端需注意：部分 Android WebView 对 SVG 滤镜支持不全，建议降级为 Canvas 像素处理或 CSS filter
