在SVG

Question

<svg width="160" height="160" viewBox="0 0 160 160"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 40 120 l 80 0 l -40 -69.28203 z" fill="none" stroke="black" stroke-width="6" />
</svg>

我有这个等边三角形，我想在中风的内部，有一个看起来像双楔的箭头，沿着笔划动画，无限。 就像一个由光线构成的箭头，带有渐变的箭头。可能有3个距离相等的人。

我一直在研究动画，我能想到的一件事是dasharray方法。我认为可以简单地在不同的颜色上方绘制另一个三角形。但我不认为这是可能的，因为没有stroke-linecap有一个尖的双楔，我也不认为用这种方法可以完成尾随渐变的效果。

然后我认为沿路径设置标记可能是可能的，但我意识到它会导致边缘处的尴尬行为。

我完全不知道如何做到这一点，我会非常关注某些指导或想法。

我画了一个模型来更好地说明它应该是什么样子：

Answer 1

可以通过动画refX，refY和orient来使用标记来完成此操作。这是一个只显示refX动画的版本。您可能需要编写一个长值数组，每个动画的值为每个refX，refY和orient定义，以完全按照您的意愿行事，但它可能。

我可能建议只使用纯javascript编写一个单独的形状和动画，因为如果你想要跨浏览器兼容性，标记是非常棘手的。

<svg width="200px" height="200px" viewBox="30 30 100 100"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="gradient2">
            <stop offset="0%"  stop-color="white" stop-opacity="0"/>
            <stop offset="100%" stop-color="blue"/>
    </linearGradient>
    <marker id="Triangle" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="1" markerHeight="6" orient="0">
      <path d="M 6 0 L 10 5 L 6 10 z" fill="blue"/>
      <rect x="0" y="0" width="6" height="10" fill="url(#gradient2)"/>
      <animate attributeName="refX" values="0;-125" dur="5s"/>
    </marker>

  </defs>
  
    <path d="M 40 120 l 80 0 l -40 -69.28203 z" fill="none" stroke="red" stroke-width="6" marker-start="url(#Triangle)" />
  
</svg>