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>的{{1}}属性将使动画在那里也起作用...

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 feColorMatrix动画在Safari中不起作用，在Chrome和Firefox中很好

1 个答案: