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内制作动画似乎是错误的，因为它们是引用，from MDN：

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

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

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

动画素描＆＃39;使用CSS3生成SVG

1 个答案: