时间戳

首页 > 解决方案 > 如何以角度获取区域下的所有svg对象？

javascript - 如何以角度获取区域下的所有svg对象？

问题描述

我正在制作一个 svg 绘图应用程序。我有一个工具，允许用户选择矩形区域中的所有形状。

我需要一种方法来检测矩形下的 svg 形状。

我尝试在我的根 svg 元素上使用“document.elementFromPoint”和“getIntersectionList”。我使用了一个将 fillColor 设置为 none 的路径 svg 对象来显示一条线。如果该区域位于不可见区域之上，则 getIntersectionList 会选择路径，因此它不起作用。如果我滚动，“document.elementFromPoint”将不起作用。

我能想到的唯一方法是在该区域内的所有像素上生成一个单击事件，并监听该事件。

我怎样才能做到这一点？谢谢你

编辑：这是一个插图。白色方块是选择区域。它下面的项目必须以红色突出显示。方块跟随鼠标。如果我将鼠标从线条上移开，它们必须变回白色 选择说明

标签： javascriptangulartypescriptsvg

解决方案

如果您想对 svg 元素进行点击事件，我强烈建议您检查ngx-svg库。它为每个元素提供了各种 svg 元素和事件。用法也很简单——

<svg-container id="test-container>
  <svg-circle radius="2" (clickEvent)="doSomething($event)"></svg-circle>
</svg-container>

这些事件适用于所有元素。您还可以使用库自定义不同的东西。有关更多信息，请查看库的文档。

推荐阅读