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

Question

我想用 CSS 为网站 Logo 制作动画。我的 Logo 看起来类似于: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”之前完成。 IE。 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 旁边的所有字母都向左移动。

如有任何帮助，我们将不胜感激。谢谢!

编辑:我想我可以分别为每个路径设置动画，类似于 translate(-50px,0px) for "B"and translate(-80px ,0px) 代表“C”。但实际上在我的真实元素中有大约 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 转换设置它们的“开始”位置。