沿 SVG 中的笔划为形状设置动画答案

【问题标题】：Animate shape along a stroke in an SVG沿 SVG 中的笔划为形状设置动画
【发布时间】：2018-01-24 19:29:08
【问题描述】：

<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 带有尖尖的双楔，而且我不认为这种方法可以实现尾随渐变的效果。

然后我认为可以为路径上的标记设置动画，但我意识到这会导致边缘出现尴尬的行为。

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

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

【问题讨论】：

不容易。也许您可以通过隐藏（遮蔽）箭头并从遮蔽区域中射出一个新箭头来制造拐角转弯的错觉。

标签： svg

【解决方案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>

【讨论】：