Frame-Motion 事件处理程序在具有 svg 路径的子组件中不起作用答案

【问题标题】：Frame-Motion event handler doesn't work in child component with svg pathFrame-Motion 事件处理程序在具有 svg 路径的子组件中不起作用
【发布时间】：2020-12-15 11:19:25
【问题描述】：

Framer Motion 在子组件中传递事件处理程序时遇到问题。

下面的沙盒： https://codesandbox.io/s/framer-motion-svg-checkbox-forked-vgrre?file=/src/Example.tsx

预期的行为是，当我将鼠标悬停在黑色圆圈上时，会出现一个胶囊形状的图标。当我将光标移出圆圈时，胶囊形状图标将消失。在上面的示例中，如果我将 onMouseEnter 和 onMouseOut 放在 CircleBackground 组件中，它们将不起作用。（就像我现在拥有的那样）但是如果我将它们移动到，那么当悬停在 svg 容器上时会出现胶囊形状图标。但目的是让胶囊形状仅在我将鼠标悬停在圆圈上时出现，而不是在 svg 容器上。因为在空白处悬停时我不需要动画。

希望我把我的问题说清楚了。谢谢

【问题讨论】：

请使用以下沙箱：codesandbox.io/s/framer-motion-floating-icon-wxipv?file=/src/…提前致谢。

标签： javascript reactjs typescript svg framer-motion

【解决方案1】：

Here 是您的问题的可能解决方案：

https://codesandbox.io/s/so-q-63601325-68peh?file=/src/Example.tsx:1016-1344

您的HoverBackground 和CircleBackground 相互覆盖，因此鼠标事件没有到达子组件。

在HoverBackground 上切换pointer-events 属性可以解决这个问题：

<HoverBackground
        path={editHoverBackground}
        variants={tickVariants}
        style={{
          pathLength,
          opacity,
          pointerEvents: isChecked ? "all" : "none"
        }}
        custom={isChecked}
        location="translate(23,39)"
        onMouseOut={() => setIsChecked(!isChecked)}
      />

【讨论】：

您好 itaydafna，感谢您的评论。我也无法将事件处理程序添加到多个孩子中。请在此处查看沙箱：codesandbox.io/s/framer-motion-floating-icon-edited-wnzf8?file=/… 我尝试添加另一个图标，它与第一个图标做同样的事情，但我希望它们分开行动。如果我将鼠标悬停在一个圆圈上，只会出现一个胶囊形状。你对此有什么建议吗？谢谢
@me-zhang，您可以采取的一个方向是将整个 SVG 元素视为可重用组件。然后你可以多次渲染它。看看这支笔，例如：codesandbox.io/s/so-q-63601325-forked-phzmw