SVG feColorMatrix анимация не работает в Safari, отлично в Chrome и Firefox - PullRequest
Новая
       30

SVG feColorMatrix анимация не работает в Safari, отлично в Chrome и Firefox

0 голосов
/ 19 июня 2019

Я применяю анимированный 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>

Не уверен, что это что-то в разрыве строки, как этот ответ , или, возможно, есть лучший способ анимировать отдельные альфа-каналы с помощью javascript. Любые идеи приветствуются!

1 Ответ

1 голос
/ 19 июня 2019

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

Установка атрибута <feColorMatrix> values после применения фильтра CSS также заставит анимацию работать там ... 

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