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

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" 前面完成。 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 旁边的所有字母都向左移动。

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

编辑： 我想我可以分别为每个路径设置动画，类似于 "B" 的 translate(-50px,0px) 和 [=33 的 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 变换设置他们的 "start" 位置。

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

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

css

svg

css-animations

translate-animation