Рафаэль - как выбрать путь по ограничительной рамке?

Question

Я новичок в svg и raphael.js. Моя задача - создать интерактивный график - пользователь щелкает / касается линии, и открывается пространство, чтобы показать некоторые текстовые элементы. У меня это работает, но линия очень маленькая цель.

Есть ли способ, чтобы пользователь щелкнул ограничивающий прямоугольник вместо пути? Я вижу getBBox (), но не вижу, как я мог бы использовать это для этой цели.

Answer 1

Одна вещь, которую вы могли бы сделать, это клонировать свой путь, отодвинуть его назад за линией, которая вас интересует, изменить атрибуты так, чтобы она была более толстой и почти полностью прозрачной, и поместить обработчики событий в эту строку.1002 * Что-то вроде этого

Вам, конечно, придется его почистить ...

Answer 2

Вы можете использовать pointer-events="boundingBox" для элемента, на котором хотите захватить события мыши.См. Спецификацию SVG Tiny 1.2 .

Вот пример .

К сожалению, я не думаю, что большинство браузеров пока поддерживают его.Опера делает, хотя.

Answer 3

Нарисуйте тонкую линию того же цвета фона за этой линией и используйте ее в качестве цели.