1

我遇到了一个“Safari 上发生的问题”，这最终导致我在基于 Chromium 的浏览器、Firefox 和 Safari 的某些场景中发现了非常不同的行为，有 3 种不同的结果。但是我真的找不到任何关于规范的参考，说明它们中的任何一个是否有任何理由或哪种行为是正确的。

可以在这个片段上检查场景 - 代码不是很有趣，预览是。

<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>

SVG 是紫色半透明的，蓝色 div 就在 SVG 后面。当 SVG 是透明的并与其他 HTML 内容重叠时，它有时可以看到下面的内容，有时则不能。接下来是我的结论：

  • 在基于 Chromium 的浏览器上，透明度按预期工作 - 将颜色与背景元素混合，直到 SVG 放置在不同的堆叠上下文中，然后不透明度停止允许从其他堆叠上下文中看到元素的后面。
  • 在 Mac 版 Safari 上，它的工作方式似乎与 Chromium 类似，但可能有问题？在相同的堆叠上下文中，透明度有效。如果您使用某些属性（如透明度停止）将 SVG 移动到新的堆叠上下文中filter，但其他属性不会停止透明度（例如transform.
  • 在 Firefox 上，透明度根本不起作用，透明 SVG 后面的元素通过它是不可见的，即使在相同的堆叠上下文中也是如此。

关于规格说明这一点的任何想法？

先感谢您。

4

0 回答 0