Как получить все объекты SVG в области в angular?

Question

Я делаю приложение рисования SVG. У меня есть инструмент, который позволяет пользователю выбирать все фигуры в прямоугольной области angular.

Мне нужен способ определения форм SVG под прямоугольником.

Я пытался использовать «document.elementFromPoint» и «getIntersectionList» в моем root элементе svg. Я использую объект SVG path с параметром fillColor, установленным на none, для отображения строки. getIntersectionList выбирает путь, если область находится над невидимой областью, поэтому она не работает. «document.elementFromPoint» не работает, если я прокручиваю.

Единственный способ, о котором я могу думать, - это генерировать событие щелчка по всем пикселям внутри области и прослушивать это событие.

Как я могу это сделать? спасибо

редактировать: вот иллюстрация. Белый квадрат - это область выбора. Предметы под ним должны быть выделены красным. Квадрат следует за мышью. Если я отведу мышь от линий, они должны повернуть назад белым

Answer 1

Если вы хотите иметь события click для элементов svg, я настоятельно рекомендую проверить библиотеку ngx-svg . Он предоставляет различные элементы SVG и события для каждого из них. Использование также довольно просто -

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

События доступны для всех элементов. Также вы можете настроить различные вещи с помощью библиотеки. Для получения дополнительной информации ознакомьтесь с документацией библиотеки.