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

这里是bug的简单演示：

在Chrome中打开以查看其外观

问题：

• 在Safari中，筛选器似乎不适用或仅部分适用。。。 不一样
• 在Firefox中，根本没有显示任何东西——似乎是这样 隐藏过滤器和应用过滤器的div

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

html:

---

Chrome接受糟糕的语法，并试图充分利用它，而Firefox通常不会

• 使用display:none将SVG从DOM中移除，因此CSS无法再找到样式。将SVG设置为零大小，将其置于内容下方或使用Visibility:hidden
• 至少在SVG1.1中，您不应该使用“px”、“em”等来标注过滤器元素的尺寸。（并且不需要调整feColorMatrixes的大小-默认情况下，大小是自动计算的。）

.a{
宽度：0；
身高：0；
}
.b{
宽度：200px；
高度：100px；
背景：桃花；
}

---

且不显示：无？

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

.a {
  display: none;
}

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