Question

我正在使用animateTransform和鼠标移动为svg设置动画。在谷歌浏览器上chrome可以正常工作，但在safari上则可以解决奇怪的故障问题。

我添加了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>

Safari上的SVG动画出现毛刺问题

0 个答案: