How to move all paths in an SVG to the same point

Question

I want to animate a website logo with CSS. My logo looks similar to: A B C. Now it's an SVG with 3 paths in it, like this:

<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" should stay where it is, and "B" and "C" should move to the left to finish in front of the "A" at the end. I.e. the 3 paths start as a word and they should finish in the same position (where the "A" is).

What I tried:

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

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

I started trying with translate(-100px,0px) (the SVG should be 100px wide), but logically this moves all letters next to the other 100px to the left.

Any help would be appreciated. Thank you!

EDIT: I guess I could animate each path separately, something similar to translate(-50px,0px) for "B" and translate(-80px,0px) for "C". But actually in my real project there are like 15 paths and I suppose there is a better (less code) solution.

Answer 1

Here is a thought.

Author your svg so that all objects are in their final position and then move them using css transforms to their start position. Then your animation of:

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

Will move them all to their original position.

See example:

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

This will work no matter how many objects you have. As long as you are comfortable with setting their "start" position using CSS transforms.