SVG 3动画圈

时间：2019-03-06 11:54:02

标签： css animation svg

因此，我试图为3个旋转的圆设置动画（如此处https://codepen.io/mckenziedave/pen/KEapXa所示），我的问题是svg似乎在动画时从一侧移到另一侧。

有人可以告诉我这个错误/我做错了什么。

    .circle {
      position:absolute;
      z-index:3;
        width: 50px;
        -webkit-animation:spin 4s linear infinite;
        -moz-animation:spin 4s linear infinite;
        animation:spin 4s linear infinite;
    }
    
    .arrow {
      position:absolute;
      z-index:2;
      width: 45px;
      margin-top:2px;
      margin-left:3px;
        -webkit-animation:spin-reverse 4s linear infinite;
        -moz-animation:spin-reverse 4s linear infinite;
        animation:spin-reverse 4s linear infinite;
    }
    
    .triangle {
      position:absolute;
      z-index:2;
      width: 60px;
      margin-top:-5px;
      margin-left:-4px;
        -webkit-animation:spin-reverse 4s linear infinite;
        -moz-animation:spin-reverse 4s linear infinite;
        animation:spin-reverse 4s linear infinite;
    }
    
    
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(3180deg); transform:rotate(360deg); } }
    
    @-moz-keyframes spin-reverse { 0% { -moz-transform: rotate(-360deg); } }
    @-webkit-keyframes spin-reverse { 0% { -webkit-transform: rotate(-360deg); } }
    @keyframes spin-reverse { 0% { -webkit-transform: rotate(-360deg); transform:rotate(360deg); } }
    
    <div style="position:absolute;top: 50%;left: 50%;">
    <div class="circle">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.cls{fill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
    </div>
    <div class="arrow">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs cx="0"><style>.cls-1{fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;}.cls-2{fill:#f7ad4f;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
    </div>
     <div class="triangle">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-a{fill:#3385c2;}</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
      </div>
    </div>

2 个答案:

答案 0 :(得分：0)

您需要在CSS中添加原始转换标签，以便它们围绕您定义的中心旋转：

.circle {
  position:absolute;
  z-index:3;
    width: 50px;
    transform-origin: 25px 25px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.arrow {
  position:absolute;
  z-index:2;
  width: 45px;
  margin-top:2px;
  margin-left:3px;
    transform-origin: 22.5px 22.5px;
    -webkit-animation:spin-reverse 4s linear infinite;
    -moz-animation:spin-reverse 4s linear infinite;
    animation:spin-reverse 4s linear infinite;
}

.triangle {
  position:absolute;
  z-index:2;
  width: 60px;
  margin-top:-5px;
  margin-left:-4px;
    transform-origin: 30px 30px;
    -webkit-animation:spin-reverse 4s linear infinite;
    -moz-animation:spin-reverse 4s linear infinite;
    animation:spin-reverse 4s linear infinite;
}

正在工作的小提琴：https://jsfiddle.net/osj9ay64/

答案 1 :(得分：0)

将div封装在SVG中会破坏自动计算转换原点的能力。因此，如果仅将这些类从包装div中移到SVG中，则可以正确计算transform-origin。

请注意，您在SVG的中心没有箭头圆圈（应为40,40）-如此固定。而且左边距也有点偏离。

.circle {
      position:absolute;
      z-index:3;
        width: 50px;
        -webkit-animation:spin 4s linear infinite;
        -moz-animation:spin 4s linear infinite;
        animation:spin 4s linear infinite;
    }
    
    .arrow {
      position:absolute;
      z-index:2;
      width: 45px;
      margin-top:2px;
      margin-left:2px;
        -webkit-animation:spin-reverse 4s linear infinite;
        -moz-animation:spin-reverse 4s linear infinite;
        animation:spin-reverse 4s linear infinite;
    }
    
    .triangle {
      position:absolute;
      z-index:2;
      width: 60px;
      margin-top:-5px;
      margin-left:-4px;
        -webkit-animation:spin-reverse 4s linear infinite;
        -moz-animation:spin-reverse 4s linear infinite;
        animation:spin-reverse 4s linear infinite;
    }
    
    
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(3180deg); transform:rotate(360deg); } }
    
    @-moz-keyframes spin-reverse { 0% { -moz-transform: rotate(-360deg); } }
    @-webkit-keyframes spin-reverse { 0% { -webkit-transform: rotate(-360deg); } }
    @keyframes spin-reverse { 0% { -webkit-transform: rotate(-360deg); transform:rotate(360deg); } }
    <div style="position:absolute;top: 50%;left: 50%;">

    <svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.cls{fill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>


      <svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
      <defs cx="0"><style>.cls-1{fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;}.cls-2{fill:#f7ad4f;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>


       <svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-a{fill:#3385c2;}</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>

    </div>

相关问题
最新问题