Question

我有一个svg，我正在尝试使用CSS偏移路径设置动画

.c2 {
  transform-origin: 480px 566px;
  offset-rotate: -90deg;
  offset-path: path('M447.33 659.34 446.09 658.49 544.72 513.98 635.11 389.54 636.33 390.42 545.95 514.84 447.33 659.34z');
  animation: move 15s infinite alternate linear;
}

.c1 {
  transform-origin: 660px 394px;
  offset-rotate: -90deg;
  offset-path: path('M505.39 660.34 504.14 659.52 599.18 514.7 687.58 389.54 688.8 390.41 600.42 515.54 505.39 660.34z');
  animation: move 15s 2s infinite alternate linear;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 980">
 <g id="cable2">
       <path d="M447.33 659.34 446.09 658.49 544.72 513.98 635.11 389.54 636.33 390.42 545.95 514.84 447.33 659.34z"/>
    </g>
    <g id="cable1">
      <path id="cabl1" d="M505.39 660.34 504.14 659.52 599.18 514.7 687.58 389.54 688.8 390.41 600.42 515.54 505.39 660.34z"/>
    </g>
    <g class="c2">
      <path d="M496.77,566.45h6a7,7,0,0,1,7,7v3.92h-13Z" fill="#22414d"/>
      <path d="M480.76,577.39v-3.87a7,7,0,0,1,5.07-6.74v10.66Z" fill="#22414d"/>
      <path d="M485.83,577.39V566.73a7.13,7.13,0,0,1,1.95-.28H497v10.94Z" fill="#294f5c"/>
      <path d="M509.83,600v3.92a7,7,0,0,1-7,7h-6V600Z" fill="#22414d"/>
      <path d="M497,600v10.94h-9.17a7.13,7.13,0,0,1-1.95-.28V600Z" fill="#294f5c"/>
      <path d="M486,610.64a7,7,0,0,1-5.08-6.74V600H486Z" fill="#22414d"/>
      <rect x="496.95" y="577.39" width="13.06" height="22.59" fill="#db4c40"/>
      <rect x="480.76" y="577.39" width="5.08" height="22.59" fill="#db4c40"/>
      <rect x="485.83" y="577.39" width="11.12" height="22.59" fill="#ff5a4a"/>
    </g>
    <g class="c1">
      <path d="M676.28,394.45h6a7,7,0,0,1,7,7v3.92h-13Z" fill="#22414d"/>
      <path d="M660.27,405.39v-3.87a7,7,0,0,1,5.07-6.74v10.66Z" fill="#22414d"/>
      <path d="M665.34,405.39V394.73a7.13,7.13,0,0,1,1.95-.28h9.17v10.94Z" fill="#294f5c"/>
      <path d="M689.34,428v3.92a7,7,0,0,1-7,7h-6V428Z" fill="#22414d"/>
      <path d="M676.46,428v10.94h-9.17a7.13,7.13,0,0,1-1.95-.28V428Z" fill="#294f5c"/>
      <path d="M665.52,438.64a7,7,0,0,1-5.08-6.74V428h5.08Z" fill="#22414d"/>
      <rect x="676.46" y="405.39" width="13.06" height="22.59" fill="#db4c40"/>
      <rect x="660.27" y="405.39" width="5.08" height="22.59" fill="#db4c40"/>
      <rect x="665.34" y="405.39" width="11.12" height="22.59" fill="#ff5a4a"/>
    </g>

现在我只想让c1和c2偏移此路径，但要从两个不同的方向进行偏移。

有没有办法做到这一点。有什么办法可以使其中一个类别的方向反向吗？

谢谢。

CSS偏移路径反向移动

0 个答案: