Safari 中的 SVG 过滤器：未应用 x、y、宽度、高度

Question

问题：

• 在 Safari 中，两个过滤器都会显示 - 但都是矩形的全宽/全高，因此只有顶部的过滤器可见。

如何让它在不同浏览器中保持一致？

此处的错误演示：https://codepen.io/mknepprath/pen/mKeObo。 在 Chrome 或 Firefox 中打开以查看其外观。谢谢！

html:

<svg class='a'>
  <defs>
    <filter id='hey'>
      <feColorMatrix
        type='matrix'
        result='darken'
        values='.2 .05  .05 0 .35
                .05 .2  .05 0 .35
                .05 .05 .2  0 .35
                0   0    0  1 0'
      />
      <feColorMatrix
        in='SourceGraphic'
        result='node'
        x='5'
        y='5'
        width='90'
        height='90'
      />
      <feMerge>
        <feMergeNode in='darken' />
        <feMergeNode in='node' />
      </feMerge>
    </filter>
  </defs>
</svg>
<div class='b' style='filter: url(#hey)'></div>

css:

.a {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.b {
  width: 200px;
  height: 100px;
  background: peachpuff;
}

Chrome 和 Firefox： 苹果浏览器：

Answer 1

当您使用 CSS 过滤器陷门将 SVG 过滤器应用于 HTML 内容时，许多过滤器功能在 Safari 上不起作用。看起来你发现了另一个这样的案例。如果您想继续使用过滤器执行此操作，请完全在 SVG 中执行此操作。