时间戳

首页 > 解决方案 > 如何将 SVG 中的所有路径移动到同一点

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

问题描述

我想用 CSS 为网站徽标制作动画。我的徽标类似于：ABC。现在它是一个包含 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 旁边的所有字母移动到左侧。

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

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

标签： csssvgcss-animationstranslate-animation

解决方案

这是一个想法。

创作您的 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 转换设置它们的“开始”位置感到满意。

推荐阅读