时间戳

首页 > 解决方案 > 我可以访问包含在 clipPath 中的多边形中的单击事件吗

angular - 我可以访问包含在 clipPath 中的多边形中的单击事件吗

问题描述

当我将多边形包装在 clipPath 标记中时，我无法访问它们的点击事件。

<image clip-path="url(#black-5)" width="100%" height="100%"
                    xlink:href="https://images.pexels.com/photos/450055/pexels-photo-450055.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
                    preserveAspectRatio="xMidYMin slice">
                </image>
<clipPath id="black-6">
                    <polygon id="L12" (click)="testClick()" class="cls-1"
                        points="710.21 46.69, 738.75 96.12, 674.51 108.55, 653.14 46.69, 710.21 46.69" fill="#FFF">
                    </polygon>
</clipPath>

标签： angularsvgpolygonclip-path

解决方案

首先，您没有正确设置 SVG，剪辑路径必须在另一个元素上使用。其次，请在 Stackblitz、Codepen 或任何其他服务上设置代码示例供我们使用。

要捕获鼠标事件，请将单击处理程序添加到顶部 svg 并解析事件的目标以找出已单击的元素。

在我为您设置的 Stackblick 示例中，检查控制台的输出。


  • 当目标是 SVGUseElement 时，您正在使用剪辑路径单击元素。
  • 当目标是 SVGPathElement 时，您在剪辑路径内单击，但在被单击的元素之外。
  • 当目标是 SVGSVGElement 时，您在
    剪切路径之外单击

https://angular-buumnd.stackblitz.io

推荐阅读