Пустое и не кликабельное заполнение путей SVG в SVG-редактировании

Question

Я делаю модификацию SVG-редактирования, которая является онлайн-редактором SVG: https://code.google.com/p/svg-edit/

Я разрешаю моим пользователям рисовать фигуры только с заполнением, установленным на "нет".

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

Есть ли какой-нибудь способ сделать формы, заполняющие клик-прозрачными, кроме визуально прозрачных?

Answer 1

Управление тем, какие части фигур реагируют на события мыши, доступно через свойство pointer-events.

Answer 2

Да, есть способ:

В CSS добавить в свой SVG pointer-events: none; и к полигонам или путям внутри множества pointer-events: fill, это делает прозрачным пустое пространство, но не заполненные фигуры, я сделал пример в codepen:

http://codepen.io/jesuscmd/pen/EyEyoP