Проблема с глючной анимацией svg в сафари - PullRequest
0 голосов
/ 21 апреля 2019

Я анимирую svg с помощью animateTransform и перемещения мыши. На Google Chrome работает нормально, но на Safari странная проблема с глюками.

ссылка на сайт: http://thebitelist.pl/test/

Я добавил padding и каким-то образом решил проблему, но его запуск отстает от всего процесса.

простой пример ниже, но та же проблема

var blob = $("#organic-blob");



$(document).on('mousemove', function(e){
    blob.css({
       left:  e.pageX,
       top:   e.pageY
    });
});
html {
  background: lavender;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#organic-blob{
    position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="organic-blob" width="300" height="300" xmlns="http://www.w3.org/2000/svg" filter="url(#goo)" fill="royalblue">
  <defs>
    <filter id="goo">
      <!-- tympanus.net/codrops/creative-gooey-effects -->
      <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>
 <g>
  <circle r="100" cy="145" cx="150">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 145 150" to="360 145 150" dur="1s" repeatCount="indefinite"/>
   </circle>
  <circle r="100" cy="155" cx="150">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 155 150" to="0 155 150" dur="2s" repeatCount="indefinite"/>
   </circle>
  <circle r="100" cy="150" cx="145">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 150 145" to="360 150 145" dur="3s" repeatCount="indefinite"/>
   </circle>
  <circle r="100" cy="150" cx="155">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 150 155" to="0 150 155" dur="2.5s" repeatCount="indefinite"/>
   </circle>
 </g>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...