Question

我有一个父元素和他的孩子（div中的div）。当我将SVG过滤器应用于父元素时，所有按预期工作，过滤器应用于整个父元素和他的孩子。但是，如果我将动画添加到子元素，则过滤器停止工作，子元素保持不变。

在Chrome中，一切正常，元素互相流动。但是在Safari中，元素会相互传递而没有必要的视觉效果。

HTML

<div class="rect-wrap">
  <div class="rect"></div>
  <div class="rect"></div>
</div>
<svg>
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" 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>

CSS

body {
  background-color: #4a4a4a;
  padding: 100px;
}

.rect-wrap {
  width: 500px;
  height: 100px;
  padding: 50px;
  filter: url('#goo');
}

.rect {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: white;
  animation: rect 5s infinite;
}

.rect:nth-child(2) {
  animation-delay: 2500ms;
}

@keyframes rect {
  from, to {
    transform: none;
  }
  50% {
    transform: translateX(300px);
  }
}

请告知我如何将这个复杂的SVG过滤器应用于带有动画子元素的HTML元素？

变通办法

HTML到SVG
将HTML元素转换为SVG元素，并将动画应用于此新元素 Example

JS动画（iOS Safari中表现不佳）
使用JavaScript动画代替CSS Example

如何将复杂的SVG过滤器应用于包含Safari中动画子元素的HTML元素？

0 个答案: