Question

我一直在努力将动画设置在圆圈上。我已达到这一点：

[我只想要小帮助将动画加载器移动到该svg中的O上，如下面的链接 http://codepen.io/tutsplus/full/ByRzOV/

我确实试过玩O点和计算，但没有成功。我做错了吗？

提前感谢你们。非常感谢。亲切的问候] 1

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 376 56.6" enable-background="new 0 0 376 56.6" xml:space="preserve">
<path fill="#232527" d="M345.8,53.3C345.8,53.3,345.8,53.3,345.8,53.3c-1.1,0-2.2-0.7-2.7-1.7l-21.7-44c-0.7-1.5-0.1-3.3,1.4-4
    c1.5-0.7,3.3-0.1,4,1.4l19,38.6l19.2-38.6c0.7-1.5,2.5-2.1,4-1.3c1.5,0.7,2.1,2.5,1.3,4l-21.9,44C348,52.6,347,53.3,345.8,53.3z
     M274.5,53.3c-1.7,0-3-1.3-3-3v-44c0-1.7,1.3-3,3-3s3,1.3,3,3v44C277.5,51.9,276.1,53.3,274.5,53.3z M205,53.3c-1.7,0-3-1.3-3-3v-41
    h-19c-1.7,0-3-1.3-3-3s1.3-3,3-3h44c1.7,0,3,1.3,3,3s-1.3,3-3,3h-19v41C208,51.9,206.7,53.3,205,53.3z M30.5,53.2
    C30.5,53.2,30.5,53.2,30.5,53.2c-1.1,0-2.2-0.7-2.7-1.7l-16-32.5v31.1c0,1.7-1.3,3-3,3s-3-1.3-3-3v-44c0-1.4,1-2.6,2.3-2.9
    C9.6,3,11,3.6,11.6,4.9l19,38.6L49.8,4.9c0.6-1.2,2-1.9,3.4-1.6c1.4,0.3,2.3,1.5,2.3,2.9v44c0,1.7-1.3,3-3,3s-3-1.3-3-3V18.9
    L33.2,51.6C32.7,52.6,31.7,53.2,30.5,53.2z"/>


<path class="path" stroke="#232527" stroke-width="5" stroke-dasharray="0,1000" fill="#fff" d="M120.2
                     ,2.7c-14.1,0-25.6,11.5-25.6
                     ,25.6c0,14.1,11.5,25.6,25.6
                     ,25.6c14.1,0,25.6-11.5,25.6-25.6
                     ,25.6c14.1,0,25.6-11.5,25.6-25.6


    "/>
</svg>

Answer 1

“O”路径中最后一个贝塞尔曲线命令中的坐标有点混乱。试试这个：

<path class="path" stroke="#232527" stroke-width="5" fill="none"
      d="M120.2,2.7
         c-14.1, 0 -25.6, 11.5 -25.6, 25.6
         c0, 14.1, 11.5, 25.6, 25.6, 25.6
         c14.1, 0, 25.6 -11.5, 25.6 -25.6
         c0, -14.1, -11.5, -25.6 -25.6 -25.6"/>

我已经删除了填充和上面的dasharray，因此您可以正确地看到路径。

这应该可以让你开始动画。

我一直在努力在圆圈上设置动画。我已达到这一点：

1 个答案: