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＆amp;火狐： 苹果浏览器：

Answer 1

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