Question

嘿，这是我第一次使用svg和动画，但我不明白。.我有这样的代码：

.ball {
  offset-path: path('M417.000,237.000 L54.000,237.000 C26.386,237.000 4.000,214.614 4.000,187.000 L4.000,4.000 M425.500,237.000 L718.500,237.000 C746.114,237.000 768.500,259.386 768.500,287.000 L768.500,470.000');
  offset-distance: 0%;

  animation: red-ball 10s linear infinite;
}

@keyframes red-ball {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="775px" height="474px">
  <path fill-rule="evenodd"  stroke="rgb(79, 191, 159)" stroke-width="4px" stroke-dasharray="2, 8" stroke-linecap="round" stroke-linejoin="bevel" fill="none"
  d="M417.000,237.000 L54.000,237.000 C26.386,237.000 4.000,214.614 4.000,187.000 L4.000,4.000 "/>
  <path fill-rule="evenodd"  stroke="rgb(79, 191, 159)" stroke-width="4px" stroke-dasharray="2, 8" stroke-linecap="round" stroke-linejoin="bevel" fill="none"
  d="M425.500,237.000 L718.500,237.000 C746.114,237.000 768.500,259.386 768.500,287.000 L768.500,470.000 "/>
  <path class="ball" fill-rule="evenodd"  stroke="rgb(79, 191, 159)" stroke-width="1px" stroke-linecap="butt" stroke-linejoin="miter" fill="rgb(79, 191, 159)"
                                  d="M4.500,0.500 C6.709,0.500 8.500,2.291 8.500,4.500 C8.500,6.709 6.709,8.500 4.500,8.500 C2.291,8.500 0.500,6.709 0.500,4.500 C0.500,2.291 2.291,0.500 4.500,0.500 Z"/>
</svg>

我想做什么：

我无法创建这两个第一路径的组合来获得线性细长球动画（当我将两个形状转换为一个形状时，我会得到类似的东西：

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="775px" height="473px">
<path fill-rule="evenodd"  stroke="rgb(79, 191, 159)" stroke-width="4px" stroke-dasharray="2, 8" stroke-linecap="round" stroke-linejoin="bevel" fill="none"
 d="M425.500,236.000 L718.500,236.000 C746.114,236.000 768.500,258.386 768.500,286.000 L768.500,469.000 L425.500,236.000 ZM4.000,186.000 L4.000,3.000 L417.000,236.000 L54.000,236.000 C26.386,236.000 4.000,213.614 4.000,186.000 Z"/>
</svg>

插画家中的线条有圆圈，但是在生成SVG中我们有线条..（预览图像显示了我想要的样子）：DataFrame.set_index
有些想法可以使球从一个圆到另一个圆，不是一个线性而是一个一个地...不使用JavaScript，这是可能的吗？

Answer 1

我已经通过反转第二条路径并将它们加入一条路径来重写了您的路径。我在CSS offset-path中使用了相同的路径。
对于您问题的第二部分，我正在使用stroke-dasharray:.1, 8;。请注意，笔划非常小：0.1个单位。另外，我正在使用stroke-linecap:round;，这将为非常小的笔触添加圆形“大写字母”，使它们看起来像圆形。
为了减少冗长和使代码更具可读性，我将路径的表示形式属性移到了CSS。

我希望这就是你想要的。

path{stroke:rgb(79, 191, 159);
  stroke-linecap:round; 
  fill:none;
  stroke-width:4px;
  stroke-dasharray:.1, 8;
  stroke-linejoin:round;
}

.ball {
  stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;fill:rgb(79, 191, 159);
  offset-path: path("M768.500,470.000 L768.500,287.000C768.500,259.386 746.114,237.000 718.500,237.000L425.500,237.000L54.000,237.000 C26.386,237.000 4.000,214.614 4.000,187.000 L4.000,4.000");
  offset-distance: 0%;

  animation: red-ball 10s linear infinite;
}

@keyframes red-ball {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 775 474">
  <!---<path  
  d="M417.000,237.000 L54.000,237.000 C26.386,237.000 4.000,214.614 4.000,187.000 L4.000,4.000 "/>
  <path 
  d="M425.500,237.000 L718.500,237.000 C746.114,237.000 768.500,259.386 768.500,287.000 L768.500,470.000 "/>-->
  
  <path 
  d="M768.500,470.000 L768.500,287.000C768.500,259.386 746.114,237.000 718.500,237.000L425.500,237.000L54.000,237.000 C26.386,237.000 4.000,214.614 4.000,187.000 L4.000,4.000"/>
  
  <path class="ball" d="M4.500,0.500 C6.709,0.500 8.500,2.291 8.500,4.500 C8.500,6.709 6.709,8.500 4.500,8.500 C2.291,8.500 0.500,6.709 0.500,4.500 C0.500,2.291 2.291,0.500 4.500,0.500 Z"/>
</svg>

更新

OP评论：

您能详细说明一下rewriten

要反转路径，您需要反转所有内容。在此示例中：

 <path 
   d="M425.500,237.000 
      L718.500,237.000 
      C746.114,237.000 768.500,259.386 768.500,287.000
      L768.500,470.000" />

反向路径从上一条路径的结尾处开始

d="M768.500,470.000...

接下来，我在贝塞尔曲线的终点画一条线：

d=".....
   L768.500,287.000

现在，我反转贝塞尔曲线：第二个控制点成为第一个，而第一个控制点现在成为第二个。贝塞尔曲线的终点在上一行结束处：

d=".....
C768.500,259.386 746.114,237.000 718.500,237.000

最后，我画一条线，结束于上一条曲线的起点：

d="...
   L425.500,237.000"

将它们放在一起：这是相反的路径：

 <path 
   d="M768.500,470.000
      L768.500,287.000
      C768.500,259.386 746.114,237.000 718.500,237.000
      L425.500,237.000" />

SVG两路一球动画

1 个答案:

更新