框架运动事件处理程序不适用于带有SVG路径的子组件

问题描述

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

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

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

希望我明确了我的问题。谢谢

解决方法

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)}
      />