Как предотвратить svg перетащить на конкретный элемент?

Question

Я использую фантастический плагин svg-pan-zoom ( https://github.com/ariutta/svg-pan-zoom) для панорамирования / масштабирования моего элемента svg, я хочу включить перетаскивание мышью, чтобы позволить перемещать его.

У меня есть один элемент внутри svg, где я хочу предотвратить перетаскивание, потому что у него есть событие click, и когда пользователь нажимает на него, иногда он перетаскивает элемент svg. Запрашиваемое поведение - перетаскивать как стандарт, за исключением случаев, когда мышь находится на этом элементе Я уже пробовал с Event.stopPropagation() и event.preventDefault(), но кажется, что плагин svg-pan-zoom имеет свое собственное управление событиями.

Как я могу предотвратить перетаскивание мышью?

Answer 1

1. Вы можете иметь 2 слоя (если вам не нужно панорамировать / масштабировать этот элемент).

2. Или вы все еще можете держать все элементы увеличенными, но только некоторые из них слушают события. Просто поместите все, что вы хотите прослушать, в одном элементе SVG Group. <g> и установите его для прослушивания событий.

3. Последнее решение было бы переопределить события по умолчанию для нажатия / перетаскивания и написать свои собственные обработчики.

Я бы порекомендовал вариант 1, если вам не нужно увеличивать масштаб элемента, или вариант 2 в противном случае.