在中心点的Svg刻度路径（搏动）

我正在尝试animate几个paths在svg约两个circles。我的目标是以scale为中心的paths，就好像它们在搏动一样。我已经看过每一个在stackoverflow上的答案来弄清楚如何实现这一点。 The closest solution我发现没有炒锅。在中心点的Svg刻度路径（搏动）

这是我到目前为止的jsfiddle。如您所见，paths正在缩小/朝向原点。如果没有办法通过CSS来实现这个目标，是否有可能通过javascript这样的框架来实现呢？Velocity.js？

这是SVG：

 <div class="wrapper"> 
      <svg version="1.1" viewBox="20 20 60 60" > 
      <g class="icon-sun"> 
       <path class="icon-sun-beam" 
        d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/> 
       <path class="icon-sun-beam" 
        d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/> 
       <path class="icon-sun-beam" 
        d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"/> 
       <path class="icon-sun-beam" 
        d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"/> 
       <path class="icon-sun-beam" 
        d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"/> 
       <path class="icon-sun-beam" 
        d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"/> 
       <path class="icon-sun-beam" 
        d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"/> 
       <path class="icon-sun-beam" 
        d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"/> 
       <circle class="icon-sun-outline" 
         cx="50.034" 
         cy="50" 
         r="11.999"/> 
       <circle class="icon-sun-fill" 
         fill="#FFFFFF" 
         cx="50.034" 
         cy="50" 
         r="7.999"/> 
      </g> 
     </svg> 
</div>

这里是CSS：

.wrapper { 
    width: 100px; 
    text-align: center; 
} 
.icon-sun-beam { 
    animation-name: scale; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
    transform-origin: 50px 50px; 
    animation-timing-function: linear; 
    animation-fill-mode: both; 
    animation-direction: alternate; 

} 

.icon-sun-beam:nth-child(even) { 
    animation-delay: 4.5s, 4.5s; 
} 

.icon-sun { 
    animation-name: rotate; 
    animation-iteration-count: infinite; 
    animation-duration: 18s; 
    animation-timing-function: linear; 
    transform-origin: 50px 50px; 
} 

svg { 
    shape-rendering: geometricPrecision; 
} 

@keyframes rotate { 
    0% { 
    transform: rotate(0); 
    } 
    100% { 
    transform: rotate(360deg); 
    } 
} 

@keyframes scale { 
    0% { 
    transform: scale(0.85, 0.85); 
    } 
    100% { 
    transform: scale(1.35, 1.35); 
    } 
}

来源

2016-12-16 Ignat Ospadov

我有一个很难搞清楚你的意思是什么，你需要什么帮助。我不明白这是一个显示你的问题的最小例子。 – Persijn

@Persijn在jsfiddle演示中，您可以看到路径中定义的形状在围绕圆旋转时的大小缩放。随着路径缩放，它们也会离开/接近x/y轴上的圆圈。我试图让路径缩放而不会离开/靠近圆圈。 –

@IgnatOspadov将光线的原点更改为'transform-origin：50％;'而不是'50px'。尽管在某些浏览器中，'％'使用整个画布的比例。 [错误1209061]（https://bugzilla.mozilla.org/show_bug.cgi?id=1209061） – Erevald

有一个简单的解决方案，那就是跨浏览器。

只要给你的每个阳光自己的绝对transform-origin。

.wrapper { 
 
     width: 100px; 
 
     text-align: center; 
 
    } 
 
    .icon-sun-beam { 
 
     animation-name: scale; 
 
     animation-duration: 3s; 
 
     animation-iteration-count: infinite; 
 
     animation-timing-function: linear; 
 
     animation-fill-mode: both; 
 
     animation-direction: alternate; 
 
     
 
    } 
 
    
 
    .icon-sun-beam:nth-child(even) { 
 
     animation-delay: 4.5s, 4.5s; 
 
    } 
 
    
 
    .icon-sun { 
 
     animation-name: rotate; 
 
     animation-iteration-count: infinite; 
 
     animation-duration: 18s; 
 
     animation-timing-function: linear; 
 
     transform-origin: 50px 50px; 
 
    } 
 
    
 
    svg { 
 
     shape-rendering: geometricPrecision; 
 
    } 
 
    
 
    @keyframes rotate { 
 
     0% { 
 
     transform: rotate(0); 
 
     } 
 
     100% { 
 
     transform: rotate(360deg); 
 
     } 
 
    } 
 
    
 
    @keyframes scale { 
 
     0% { 
 
     transform: scale(0.85, 0.85); 
 
     } 
 
     100% { 
 
     transform: scale(1.35, 1.35); 
 
     } 
 
    }

<div class="wrapper"> 
 
       <svg version="1.1" viewBox="20 20 60 60" > 
 
       <g class="icon-sun"> 
 
        <path class="icon-sun-beam" style="transform-origin: 70.0px 50.0px;" 
 
         d="M72.03,51.999 
 
         h-3.998 
 
         c-1.105,0-2-0.896-2-1.999 
 
         s0.895-2,2-2h3.998 
 
         c1.104,0,2,0.896,2,2 
 
         S73.136,51.999,72.03,51.999z"/> 
 
        <path class="icon-sun-beam" style="transform-origin: 64.2px 35.9px;" 
 
         d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/> 
 
        <path class="icon-sun-beam" style="transform-origin: 50.0px 30.0px;" 
 
         d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"/> 
 
        <path class="icon-sun-beam" style="transform-origin: 35.9px 35.9px;" 
 
         d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"/> 
 
        <path class="icon-sun-beam" style="transform-origin: 30.0px 50.0px;" 
 
         d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"/> 
 
        <path class="icon-sun-beam" style="transform-origin: 35.9px 64.1px;" 
 
         d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"/> 
 
        <path class="icon-sun-beam" style="transform-origin: 50.0px 70.0px;" 
 
         d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"/> 
 
        <path class="icon-sun-beam" style="transform-origin: 64.2px 64.1px;" 
 
         d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"/> 
 
        <circle class="icon-sun-outline" 
 
          cx="50.034" 
 
          cy="50" 
 
          r="11.999"/> 
 
        <circle class="icon-sun-fill" 
 
          fill="#FFFFFF" 
 
          cx="50.034" 
 
          cy="50" 
 
          r="7.999"/> 
 
       </g> 
 
      </svg> 
 
    </div>

来源

2016-12-17 06:13:27

我结束了使用GSAP库动画SVG。我之所以选择这样做是因为没有解决方案可以在Chrome或Firefox上打破动画的情况下运行。这是我测试过的代码，适用于IE 11，Firefox和Chrome。我使用Jquery和TweenMax库。

$(document).ready(function() { 
    var sun = $(".icon-sun"); 
    var sunBeamEven = $(".icon-sun-beam:even"); 
    var sunBeamOdd = $(".icon-sun-beam:odd"); 
    function animateSun(){ 
    TweenMax.to(sun, 12, {rotation:"+=360", svgOrigin:"50 50", smoothOrigin:true, repeat:-1, ease:Linear.easeNone}); 
    TweenMax.to(sunBeamEven, 4, {scale:0.5, transformOrigin:"50% 50%", repeat:-1, yoyo:true, ease:Linear.easeNone}); 
    TweenMax.to(sunBeamOdd, 4, {scale:0.5, transformOrigin:"50% 50%", repeat:-1, yoyo:true, ease:Linear.easeNone, delay:3}); 
    } 
animateSun();

来源

2016-12-16 21:00:57

在中心点的Svg刻度路径（搏动）

回答

相关问题