css - 使用 CSS3 动画草图生成的 SVG

Question

我有以下用于从 Sketch 文件导出的 Assets 的 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);
  }
}

动画有效，两个圆圈正常旋转，但不知何故圆圈变得畸形，圆圈的笔触变得越来越浅和粗。当我不执行 transformation 时，微调器看起来像这样，我认为问题主要在于 transform 属性

这是一个现场演示: http://jsbin.com/zipecefune

我不确定为什么会这样，有什么想法吗？

Answer 1

我不确定问题的根源是什么，但在 defs 中设置动画似乎是错误的因为这些是引用，from MDN :

SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a <defs> element. Objects created inside a <defs> element are not rendered immediately; instead, think of them as templates or macros created for future use.

如果不是动画化你的 circle您制作动画的元素 use ，问题已解决(您需要重命名 id 属性，因为它们必须是唯一的。

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