使用 CSS3 为 Sketch 生成 SVG 的动画答案

【问题标题】：Animating Sketch' Generated SVG using CSS3使用 CSS3 为 Sketch 生成 SVG 的动画
【发布时间】：2017-11-28 22:27:25
【问题描述】：

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

<?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

我不知道为什么会这样，有什么想法吗？

【问题讨论】：

标签： css animation svg

【解决方案1】：

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

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

如果不是为circle 元素设置动画，而是为use 设置动画，则问题已解决（您需要重命名id 属性，因为它们必须是唯一的。

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

【讨论】：

谢谢！这行得通。对 SVG 了解不多，也不知道发生了什么，感谢您指出问题。