#javascript #svg
#javascript #svg
Вопрос:
У нас есть код, который загружает SVG через Ajax и взаимодействует через Javscript. SVG представляет схемы подключения, то есть пути («провода») и текст («метки для проводов»). Пути и текстовые объекты сгруппированы под узлом — каждый узел также содержит узел: используя идентификаторы, которые мы помещаем в узел desc, мы можем реагировать на щелчок — например, путем отображения сведений о «выбранном проводе».
В целом система работает отлично, но иногда возвращаемое событие щелчка SVG, похоже, принадлежит «другому проводу». Вот пример геометрии, когда это происходит:
---------------
-
-
....... -.....Wire1....
-
-
-
------Wire2--
(Надеюсь, это понятно — Провод1 проходит горизонтально, провод 2 имеет зигзагообразную форму и проходит вертикально, пересекая Провод1)
В этой геометрии поведение, которое мы видим, является:
-
Щелкните путь Wire1 -> событие указывает на путь Wire1
Нажмите на текст Wire1 -> событие указывает на путь Wire2 (! Неправильно)
Нажмите на путь Wire2 -> событие указывает на путь Wire2
Нажмите на текст Wire2 -> событие указывает на текст Wire2
Изменение порядка z (запись Wire1 после Wire2 в файле SVG) не имеет никакого эффекта.
Представление проводов серией коротких путей (а не одним длинным путем) устраняет эту проблему, но увеличивает размер файлов (а эти схемы подключения огромны).
Хотелось бы, чтобы это была всего лишь одна ошибка в одном SVG-браузере, но она наблюдается в Safari 5 и Mozilla. (Которые, я полагаю, не имеют общей базы кода). Это говорит о том, что при некоторых обстоятельствах SVG определяет «активную интерактивную область» Z-образного пути как его ограничивающий прямоугольник.
Как мы можем это контролировать? Существует ли атрибут тега заголовка или другой рабочий цикл, который ограничивал бы активную область любого пути самим путем?
Ответ №1:
Если у вас есть заливка на ваших контурах (даже того же цвета, что и ваш фон), это четко объяснило бы это. У вас есть тестовый пример, которым вы можете поделиться, показывающий проблему?
Комментарии:
1. Вы действительно правы; спасибо. Один из моих коллег показал мне, что для этого пути определена «заливка» и что путь был предоставлен внутри «охватывающего прямоугольника», заполненного фоновым цветом. Я предполагал, что интерактивность можно отключить с помощью параметра fill-opacity: 0.0, который я наблюдал в других местах. Очевидно, что этого недостаточно, и действительно работает только ‘fill: none’.