SVG 过滤器：仅适用于 Chrome，不适用于其他浏览器

Question

这里是错误的简单演示：https://codepen.io/mknepprath/pen/mKeObo

在 Chrome 中打开以查看其外观。

问题：

在 Safari 中，过滤器似乎不适用或仅部分适用... 这是不同的。
在 Firefox 中，什么也没有显示 - 似乎是隐藏过滤器和应用过滤器的div。

我如何让它在浏览器中一致地工作？

html:

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

css:

.a {
  display: none;
}

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

Answer 1

Chrome 接受错误的语法并尝试充分利用它，Firefox 通常不会。

使用 display:none 将 SVG 从 DOM 中取出，因此 CSS 无法再找到样式。使 SVG 大小为零，将其放在您的内容下方或使用 visbility: hidden
至少在 SVG 1.1 中，您不应该能够使用 "px"、"em" 等来确定过滤器元素的尺寸。（并且不需要调整 feColorMatrixes 的大小 - 默认情况下会自动计算大小。）

.a {
  width: 0;
  height: 0;
}

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

<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
        type="matrix"
        result="node"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0"
      />
      <feMerge>
        <feMergeNode in="darken" />
        <feMergeNode in="node" />
      </feMerge>
    </filter>
  </defs>
</svg>
<div class="b" style="filter: url(#hey)"></div>

SVG 过滤器：仅适用于 Chrome，不适用于其他浏览器

SVG Filter: Only working in Chrome, not other browsers

javascript

svg

cross-browser

filter

svg-filters