CSS层叠上下文是否影响SVG不透明度？各浏览器表现差异咨询

规范依据 #

你遇到的表现差异核心是mix-blend-mode、层叠上下文、SVG渲染三者的联动处理，CSS合成与混合模块 Level 1 中有明确约定：

• mix-blend-mode的作用范围仅限元素当前所属的层叠上下文，当元素被包裹在独立层叠上下文中时，混合仅在该上下文内部生效，无法和上下文外的下层元素混色。
• Chromium的现有表现完全符合规范要求。

各浏览器异常原因 #

• Firefox：属于内核实现bug，其对SVG内部声明的mix-blend-mode默认做了隔离处理，无论是否处于同层叠上下文，都不会和SVG外的HTML元素混合。
• Mac Safari：属于Webkit内核的实现偏差，不同属性触发的层叠上下文处理逻辑不一致：transform触发的层叠上下文保留了混合模式穿透能力，filter触发的层叠上下文则执行了严格隔离，导致两种场景表现不同。

兼容解决方案 #

如果需要全浏览器一致的表现，可按需选择以下修复方案：

• 仅需要半透明效果不需要混合：删除所有SVG内部的mix-blend-mode: multiply声明，仅保留fill-opacity控制透明度即可。
• 需要保留混合效果：将mix-blend-mode声明从SVG内部迁移到SVG的外层HTML容器上，由HTML层面统一控制混合逻辑，同时给外层容器添加isolation: auto强制关闭默认隔离。
• 避免不必要的独立层叠上下文：如果不需要transform/filter效果，不要给SVG外层容器添加这类会触发独立层叠上下文的属性。

复现代码 #

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
  <symbol id="flag" viewBox="0 0 600 200">
    <defs>
      <linearGradient id="prefix__e" x1="27.243%" x2="72.757%" y1="67.663%" y2="32.348%">
        <stop offset="0%"/>
        <stop offset="100%" stop-opacity="0"/>
      </linearGradient>
      <path id="prefix__a" d="M0 0H700V600H0z"/>
    </defs>
    <g style="mix-blend-mode:multiply" fill="none" fill-rule="evenodd">
      <mask id="prefix__b" fill="#fff">
        <use xlink:href="#prefix__a"/>
      </mask>
      <g style="mix-blend-mode:multiply" mask="url(#prefix__b)">
        <g>
          <g>
            <path fill="#592C82" d="M349.941 0L0 95.825 0 469.766 0 977.167 350.059 1071.707 700 977.167 700 95.825 700 95.706z" transform="matrix(1 0 0 -1 0 600) translate(0 95.043)"/>
            <path fill="url(#prefix__e)" fill-opacity=".6" d="M349.941 0L0 95.825 0 469.766 0 977.167 350.059 1071.707 700 977.167 700 95.825 700 95.706z" transform="matrix(1 0 0 -1 0 600) translate(0 95.043)"/>
          </g>
        </g>
      </g>
    </g>
  </symbol>
</svg>

<div>
  <div style="background: blue; height: 40px">below svg is at same stacking context</div>
  <div style=" transform: none">
    <svg width="300" height="100" style="margin-left: 50px; margin-top: -20px;">
      <use xlink:href="#flag"></use>
    </svg>
  </div>
  <hr>
  <div style="background: blue; height: 40px">below svg has own stacking context (translate)</div>
  <div style=" transform: translate(0, 0 );">
    <svg width="300" height="100" style="margin-left: 50px; margin-top: -20px;">
      <use xlink:href="#flag"></use>
    </svg>
  </div>
  <hr>
  <div style="background: blue; height: 40px">below svg has own stacking context (opacity)</div>
  <div style=" filter: opacity(100%);">
    <svg width="300" height="100" style="margin-left: 50px; margin-top: -20px;">
      <use xlink:href="#flag"></use>
    </svg>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Áxel Costas Pena