У нас есть код, который загружает SVG через Ajax и взаимодействует через Javscript. SVG представляет электрические схемы - это пути («провода») и текст («метки для проводов»). Пути и текстовые объекты группируются под узлом - каждый узел также содержит узел: с помощью идентификаторов мы помещаем в узел desc, мы можем реагировать на щелчок - например, выскакивая информацию о выбранном проводе.
В целом система работает отлично, но иногда событие щелчка SVG, которое мы получаем, кажется, принадлежит «другому проводу». Вот пример геомтрии, когда это происходит:
---------------
-
-
....... -.....Wire1....
-
-
-
------Wire2--
(Надеюсь, это понятно - Wire1 проходит горизонтально, Wire 2 имеет зигзагообразную форму и проходит вертикально при пересечении Wire1)
В этой геометрии поведение, которое мы видим:
Нажмите на путь Wire1 -> точки события на пути Wire1
Нажмите на текст Wire1 -> точки события на пути Wire2 (! Неверно )
Нажмите на Путь к Wire2 -> точки события на Путь к Wire2
Нажмите на текст Wire2 -> точки события на тексте Wire2
Изменение порядка z (запись Wire1 After Wire2 в SVG-файл) не имеет никакого эффекта.
Представление проводов с помощью ряда коротких путей (а не одного длинного пути) устраняет эту проблему, но увеличивает размер файлов (и эти схемы соединений являются массивными).
Хотелось бы, чтобы это была всего лишь одна ошибка в одном браузере SVG - но это наблюдается в Safari 5 и Mozilla. (Который я предполагаю, не разделяют общую кодовую базу). Это говорит о том, что при некоторых обстоятельствах SVG определяет «активную активируемую область» Z-образного пути как его ограничивающий прямоугольник.
Как мы можем это контролировать? Существует ли атрибут тега заголовка или другой обход, который ограничивал бы активную область любого пути самим путем?