Javascript SVG箭头动画

我已经实现了一个不断增长的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>

以下是原始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时，我会避免手动更改其路径数据，因为它可能很快变得混乱

确保两个单独移动的元素同时移动的最佳方法是将它们组合在一起，然后只移动组，我将构造SVG，这样您就可以得到如下结果：

假设这里的两条线都是完全相同的线，只是因为一条线直接覆盖另一条线-当分组的线/箭头移动时，它看起来像是在延伸

然后，在您的状态下，转换组属性如下所示：

constgroupprops=ishored？{transform:'translate（050）}:{transform:'translate（050）}；

谢谢，这比我的方法更有效。一个小问题，把它弄平滑一点怎么样。我添加了以下内容：

code svg#c-arrow{overflow:visible；g{-moz transition:transform 330ms ease-in-out；}}}

，但是在Firefox中这不适用。任何反馈都可以！我假设该代码段是嵌套的SCS/sass，而不是css。我建议把所有的转换前缀都放在上面，这样你就有了

-webkit-…

，

-moz-…

等等，而且没有前缀。也就是说，如果您使用的是标签中提到的React，那么autoprefixer（捆绑在一起）可能会去掉不必要的前缀。如果是这种情况，请确保转换的是您的

，并尝试将样式规则直接应用于元素，而不是通过样式表。是的，这是scss，我删除了一些css。我确实将css直接添加到父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>