javascript - SVG 箭头动画

Question

我已经实现了一个不断增长的 SVG 动画，由于我对 SVG 动画不太熟悉，我的实现几乎没有问题。动画很简单，当我悬停时，SVG 箭头会向前移动，这意味着线会变长，尖端会随着线移动。它在 Chrome 上运行良好，但是，在 Firefox 和 Safari 中它没有按预期工作，箭头的线和尖端会稍微延迟移动。我尝试了一些东西，但是我似乎不适用于其他浏览器。这是我的代码:

<div className="slider-arrow-down-btn" style={{ cursor: 'pointer' }}>
  <Link title="scroll down" to="/#homepage" onMouseEnter={this.handleOnEnter} onMouseLeave={this.handleOnLeave} className="animated-arrow-bottom">
    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="61" viewBox="0 0 30 61">
      <g fill="none" fillRule="evenodd">
      <path id="arrow-path-bottom" stroke="#FFF" strokeLinejoin="bevel" strokeWidth="4" d="M2.5 39.5l12.5 20 12.5-20" />
      <path id="arrow-line-bottom" fill="#FFF" d={`M17 0v${pathHeight}h-4V0z`} />
    </g>
    </svg>
  </Link>
</div>

和方法:

handleOnEnter = () => {
  this.setState({ pathHeight: 100 });
}

handleOnLeave = () => {
  this.setState({ pathHeight: 60 })
}

这是原始的 svg:

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="61" viewBox="0 0 30 61">
    <g fill="none" fill-rule="evenodd">
        <path stroke="#FFF" stroke-linejoin="bevel" stroke-width="4" d="M37 23L49.5 3 49.5 3 62 23" transform="rotate(90 14 14) matrix(0 -1 -1 0 62.5 62.5)"/>
        <path fill="#FFF" d="M0 11L60 11 60 15 0 15z" transform="rotate(90 14 14)"/>
    </g>
</svg>

因此，预期的结果是，每当我将 svg 悬停在 svg 上时，该线就会增长(并在开始时保持固定)，并且该点将同时移动，没有延迟。谢谢!

Answer 1

在使用 SVG 时，我会避免手动更改它们的路径数据，因为它很快就会变得困惑。

确保两个单独移动的元素同时移动的最佳方法是将它们组合在一起并移动该组，我会构建您的 SVG，以便您具有以下内容:

<svg>
  <line {...{ /* Line Properties */ }} />
  <g {...{ /* Transform Properties */ }}>
    <line {...{ /* Line Properties (as above) */ }} />
    <path {...{ /* Arrow Head Properties */ }} />
  </g>
</svg>

想象这里的两条线是完全相同的线，除了因为一条线直接覆盖另一条线 - 当分组的线/箭头移动时，它看起来像是延伸了。

然后在您的状态下，转换组属性类似于:

const groupProps = isHovered ? { transform: 'translate(0 50)' } : { transform: 'translate(0 0)' };