SVG feColorMatrix 动画在 Safari 中不起作用，在 Chrome 和 Firefox 中正常

Question

我正在将动画 feColorMatrix 应用到外部图像背景，它在 Chrome 和 Firefox 中运行良好，但在 Safari 中根本不行......

#shell-bg {
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: url("https://picsum.photos/id/13/1000/800") no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.filtered {
  width: 100%;
  filter: url(#shapeshift);
  -webkit-filter: url(#shapeshift);
}

<div id="shell-bg" class="filtered"></div>
<svg id="shell-svg">
  <defs>
    <filter id="shapeshift" color-interpolation-filters="sRGB" x="0%" y="0%" height="100%" width="100%">
      <feColorMatrix result="wispy" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 0 0 1 0">
        <animate 
          attributeType="XML" 
          id="fe1" 
          attributeName="values" 
          from="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" 
          to="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" 
          dur="10s" 
          values = "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 ; 0.8 0 0.04 0.04 0 0 0.8 0 0 0 0 0 0.8 0 0 0 -2 0 1 0 ; 1 -0.6 0.7 0.9 0 0 1.2 0 0 0 0 0 1 0 0 0 0 0 0.4 0 ; 1 0.2 0 0 0 0 1 0 0 0 0 0 1 0 0 -2.6 0 0 1 0 ; 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 ;"
          keyTimes = "0 ; 0.5 ; 0.75 ; 0.85 ; 1"
          begin="3s;fe1.end+3s"/>
      </feColorMatrix>
    </filter> 
  </defs>
</svg>

不确定是不是像 answer 这样的换行符，或者可能有更好的方法通过 javascript 为单独的 alpha 通道设置动画。任何想法表示赞赏！

Answer 1

Safari 对声明 <animate> values 和 keyTimes 属性的格式非常严格。在此浏览器中，内部值应由单个分号 val1;val2 分隔。

但这对于我们的案例来说还不够......

有一个非常奇怪的错误，即 CSS 过滤器不会从动画中获取值，而 SVG 过滤器会：

#shell-bg {
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: url("https://picsum.photos/id/13/1000/800") no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.filtered {
  width: 100%;
  filter: url(#shapeshift);
}

<svg id="shell-svg" height="50">
  <defs>
    <filter id="shapeshift" color-interpolation-filters="sRGB" x="0%" y="0%" height="100%" width="100%">
      <feColorMatrix type="matrix">
        <animate 
          attributeType="XML" 
          id="fe1"
          attributeName="values" 
          dur="4s"
          repeatCount="indefinite"
          values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0;0.8 0 0.04 0.04 0 0 0.8 0 0 0 0 0 0.8 0 0 0 -2 0 1 0;1 -0.6 0.7 0.9 0 0 1.2 0 0 0 0 0 1 0 0 0 0 0 0.4 0;1 0.2 0 0 0 0 1 0 0 0 0 0 1 0 0 -2.6 0 0 1 0;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
          keyTimes="0;0.5;0.75;0.85;1"
          begin="0s"/>      
      </feColorMatrix>
    </filter> 
  </defs>
  <!-- our rectangle will have the animated filter -->
  <rect fill="red" filter="url(#shapeshift)" width="100" height="20"/> 
</svg>
<!-- the one applied through CSS won't animate -->
<div id="shell-bg" class="filtered"></div>

我确实找到了一种解决方法，尽管它是如此丑陋，正确的做法是在 Webkit 的错误跟踪器上打开一个问题...

在 CSS 应用过滤器之后设置 <feColorMatrix> 的 values 属性将使动画也在那里工作...

// yes, no need to set any actual value...
mat.setAttribute('values', '');

#shell-bg {
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: url("https://picsum.photos/id/13/1000/800") no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.filtered {
  width: 100%;
  filter: url(#shapeshift);
}

<svg id="shell-svg" height="0" width="0" style="position:absolute;pointer-events:none">
  <defs>
    <filter id="shapeshift" color-interpolation-filters="sRGB" x="0%" y="0%" height="100%" width="100%">
      <feColorMatrix id="mat" type="matrix">
        <animate 
          attributeType="XML" 
          id="fe1"
          attributeName="values" 
          dur="4s"
          repeatCount="indefinite"
          values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0;0.8 0 0.04 0.04 0 0 0.8 0 0 0 0 0 0.8 0 0 0 -2 0 1 0;1 -0.6 0.7 0.9 0 0 1.2 0 0 0 0 0 1 0 0 0 0 0 0.4 0;1 0.2 0 0 0 0 1 0 0 0 0 0 1 0 0 -2.6 0 0 1 0;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
          keyTimes="0;0.5;0.75;0.85;1"
          begin="0s"/>      
      </feColorMatrix>
    </filter> 
  </defs>
</svg>
<div id="shell-bg" class="filtered"></div>