html - SVG 过滤器显示不正确的颜色

Question

我找到了这个教程，并认为它很有趣。但是，我在某些浏览器中遇到了问题。白色不是使用粉红色，而是显示应该发生混合的位置。我不确定这是否是因为feColorMatrix或什至feComposite？也许这与 Chrome 版本有关（显示的问题发生在 Chrome 63 中），但对 SVG 的支持似乎很好。

我可以应用此问题的任何解决方法吗？

代码笔链接。

问题图片：

var tl = new TimelineMax({repeat: -1});

tl.from("#two", 2, {ease: SlowMo.ease.config(0.7, 0.7, false), scale: .2, y: -60})
  .to("#two", 1, {y: 100})
  .to("#two", 1, {ease: Back.easeOut.config(1.7), y: -60, scale: .2})
;

.container {
  -webkit-filter: url("#goo");
  filter: url("#goo");
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.container div {
  width: 100px;
  height: 100px;
  background: #f59393;
  border-radius: 100px;
}

#two {
  position: relative;
  top: -1px;
}

body {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

<div class="container">
  <div id="one" class="box"></div>
  <div id="two" class="box"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
</svg>

标签： htmlcsssvgsvg-filters