用CSS3动画素描生成SVG

Question

对于从Sketch文件导出的资产，我有以下SVG代码

<?xml version="1.0" encoding="UTF-8"?>
<svg width="116px" height="117px" viewBox="0 0 116 117" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="loader_circles">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>Group 2</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <circle id="path-1" cx="58.5" cy="58.5" r="58.5"></circle>

        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="117" height="117" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>

        <circle id="path-3" cx="59" cy="59" r="36"></circle>

        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="72" height="72" fill="white">
            <use xlink:href="#path-3"></use>
        </mask>
    </defs>
    <g id="Common-elements" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="78,34">
        <g id="Group-2" stroke="#4A90E2" stroke-width="14">
            <use  id="Oval-8" mask="url(#mask-2)" xlink:href="#path-1"></use>
            <use id="Oval-8" mask="url(#mask-4)" xlink:href="#path-3"></use>
        </g>
    </g>
</svg>

它是一个包含两个圆圈的加载旋转器，现在我的目标是使用CSS3关键帧动画来动画这两个圆圈，主要使用transform属性来旋转它。

我不是SVG的专家，所以我寻找用CSS动画SVG的方法，发现它只是简单地为特定路径动画SVG代码中的元素。

所以我做了这个

#path-1 {
  transform-origin: center;
  animation: rotateClockwise 0.6s infinite linear;
}

#path-3 {
  transform-origin: center;
  animation: rotateAntiClockwise 0.6s infinite linear;
}


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

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

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

  100% {
    transform: rotate(-360deg);
  }
}

动画作品中，两个圆圈按其应有的方式旋转，但不知何故，圆圈的形状变得畸形，圆圈的笔画变得越来越苍白和厚实。当我不执行transform计算时，旋转器看起来是这样的，我认为问题主要在于transform属性

​

​

下面是一个现场演示：http://jsbin.com/zipecefune

我不知道为什么会发生，有什么想法吗？

Answer 1

我不知道问题的根源是什么，但是在defs中动画似乎是错误的，因为这些都是参考，来自MDN

SVG允许为以后的重用定义图形对象。建议尽可能在<defs>元素中定义引用元素。在<defs>元素中创建的对象不会立即呈现；相反，可以将它们看作是为将来使用而创建的模板或宏。

如果不是动画您的circle元素，您动画use，问题是固定的(您需要重命名的id属性，因为它们必须是唯一的。

http://jsbin.com/qonokufimo/edit?html,css,js,output