Question

我想用CSS为网站徽标制作动画。我的徽标类似于： A B C 。现在，它是一个包含3条路径的SVG，如下所示：

<div id="logo-wrapper">
  <svg class="logo-svg" enable-background="new 0 0 100 20" version="1.1" viewBox="0 0 100 20" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
      <path class="logo-letter logo-a" d="..." fill="#26508C"/>
      <path class="logo-letter logo-b" d="..." fill="#26508C"/>
      <path class="logo-letter logo-c" d="..." fill="#26508C"/>
  </svg>
</div>

“ A”应留在原处，“ B”和“ C”应向左移动，最后到达“ A”的前面。即这3条路径以一个单词开头，并且应该在同一位置（“ A”所在的位置）结束。

我尝试过的事情：

.logo-b,
.logo-c  {
  animation: go-left 2s ease infinite;
}

@keyframes go-left {
  100% { transform: translate(0%, 0%); } 
}

我开始尝试使用translate(-100px,0px)（SVG的宽度应为100px），但是从逻辑上讲，这会将所有字母向左移动100px。

任何帮助将不胜感激。谢谢！

编辑：我想我可以分别为每个路径设置动画，类似于{B的translate(-50px,0px)和C的translate(-80px,0px)。但是实际上，在我的真实项目中，大约有15条路径，我想有一个更好的（更少代码）解决方案。

Answer 1

这是一个想法。

对svg进行授权，以使所有对象都位于其最终位置，然后使用css变换将其移动到其起始位置。然后您的动画：

@keyframes go-left {
  100% { transform: translate(0%, 0%); } 
}

将它们全部移动到原始位置。

查看示例：

.obj1 {
transform: translate(33%, 0%);
}

.obj2 {
transform: translate(66%, 0%);
}

.obj1, .obj2, .obj3  {
   animation: go-left 2s ease infinite;
}

@keyframes go-left {
  100% { transform: translate(0%, 0%); } 
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 537.71 130.97">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
        stroke: #000;
        stroke-miterlimit: 10;
        stroke-width: 7px;
      }
    </style>
  </defs>
  <title>Untitled-1</title>
  <rect class="cls-1 obj1" x="21.85" y="19.4" width="94" height="94"/>
  <circle class="cls-1 obj2" cx="68.35" cy="65.9" r="57.5"/>
  <polygon class="cls-1 obj3" points="68.86 7.91 87.81 46.31 130.19 52.47 99.52 82.36 106.76 124.57 68.86 104.64 30.95 124.57 38.19 82.36 7.52 52.47 49.9 46.31 68.86 7.91"/>
</svg>

无论您有多少个对象，这都将起作用。只要您对使用CSS转换设置其“开始”位置感到满意。

如何将SVG中的所有路径移动到同一点

1 个答案: