使用div实现SVG同款mix-blend-mode效果的技术问询

一、SVG 是否默认具备 isolation: isolate 特性？ #

是的，SVG 里的容器元素（比如 <g>、<svg> 自身、<defs> 等）默认就自带隔离混合的特性，效果等价于 CSS 中设置 isolation: isolate。

这是因为 SVG 的合成模型规定，每个容器元素都会创建一个独立的合成上下文，内部元素的混合模式只会在这个上下文里生效，不会影响到外部元素。而 HTML 里的普通块级元素（比如 <div>）默认没有这个隔离机制，所以你用 <div> 复现效果时，必须手动加 isolation: isolate 来强制生成独立合成上下文，才能和 SVG 的表现对齐。

二、混合模式规范中“Group”的定义 #

在 CSS mix-blend-mode 规范里，“Group”指的是拥有独立合成上下文的元素或容器，满足以下任一条件的元素都会被认定为一个“Group”：

• 设置了 isolation: isolate 的元素
• SVG 中的各类容器元素（<g>、<svg>、<symbol> 等）
• 设置了特定 CSS 属性的元素，比如 opacity < 1、transform、filter、clip-path 等（这些属性会触发浏览器创建独立合成上下文）
• 根元素（HTML 的 <html> 或 SVG 的 <svg>）

直白点说，“Group”就是一个独立的渲染容器，内部的混合、合成操作都被限定在这个容器范围内，不会干扰外部元素的渲染结果。

内容的提问来源于stack exchange，提问作者oceanGermanique