重叠的不规则元素 HTML/CSS

问：

旋转的圆圈，每当它在中间时，我想突出显示箭头，半圆是在 svg 中使用路径元素完成的。

function elementsOverlap(el1: Element, el2: Element) {
    if (!el1 || !el2) return;

    const domRect1 = el1.getBoundingClientRect();
    const domRect2 = el2.getBoundingClientRect();

    return !(
        domRect1.top > domRect2.bottom ||
        domRect1.right < domRect2.left ||
        domRect1.bottom < domRect2.top ||
        domRect1.left > domRect2.right
    );
}

我做了一个不起作用的函数，因为我采用了边界框。我不知道如何制作它，所以它采用半圆的实际形状来检查它是否重叠，这可以告诉我何时突出显示箭头，以及我的问题如何制作它，以便我可以检测到半圆在箭头旋转时指向的区域。

如何检测重叠的不规则元素

不应突出显示箭头 - [1]：https://i.stack.imgur.com/QvQTJ.png

应突出显示箭头 - [1]：https://i.stack.imgur.com/g0NAV.png