如何获得元素的复杂边界？

Question

某些元素具有复杂的边界，例如a与line-height css属性> 1.0的链接或svg对象。确定可以单击以触发单击事件的（x，y）区域很重要。在元素上使用javascript的.click()方法不是我的情况的解决方案。

我只找到getBoundingClientRect，但是太粗糙了。在区域中间单击，在下面的示例中是未命中的单击。您也可以阅读本文以查看复杂边界的示例。 https://travishorn.com/buttons-with-custom-shapes-cabdcde7dfd1

<div style="width: 100px">
    <a href="#" style="line-height: 1.4; border: red 1px solid;">long link long link long link</a>
</div>

我想要一个函数，该函数返回描述元素边界的闭合曲线的列表。