相关疑难解决方法(0)

嗨，我想知道如何像上面那样对 svg 箭头进行动画处理（悬停时）。

我尝试过使用 CSS 变换，但它们也会缩放箭头，这不好。我认为正确的方法是使用 SVG 动画，但我不知道从哪里开始。例如，我将使以下箭头（仅线）增长，箭头相应地移动。

<svg width="600px" height="100px">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
    </marker>
  </defs>

  <line x1="50" y1="50" x2="100" y2="50" stroke="#000" stroke-width="5"     marker-end="url(#arrow)" />
</svg>

很感谢任何形式的帮助！

我需要使用SVG从一点(x0,y0)到另一点绘制漂亮的描边箭头(x1,y1)，就像图片上的那个一样。

我能想象的唯一方法是使用带有标记的线（基本上是两条线来模拟笔触和填充），但是由于笔触重叠，因此看起来很难看。

理想情况下，线条和标记都应该使用相同的颜色填充，并且应该具有相同的笔触颜色，并且整体箭头宽度可以固定（但是如果我也可以对其进行参数化的话，那会很酷）。基本上，它的外观应与提供的图片相同，并且只需提供两个点的坐标即可绘制。可能吗？