Empty and non-clickable filling of SVG paths in SVG-edit

大兔子大兔子 提交于 2020-01-05 15:14:21

问题


I am doing a modiciation of SVG-edit which is an online SVG-editor: https://code.google.com/p/svg-edit/

I allow my users to draw shapes only with fillings set to "none".

However now i want when my users draw these shapes, to allow them to hover over the shapes and display some information about them. When the shapes are "behind" some other shapes, althought they are visible because the filling is set to none, they are unclickable because the filling of the top shape is practically there but its just invinsible.

Is there any way of making the shapes filling "click-transparent" apart from only visually transparent?


回答1:


Control over what parts of shapes react to mouse events is available via the pointer-events property.




回答2:


Yes, there is a way:

In css add to your svg pointer-events: none; and to the polygons or paths inside set pointer-events: fill, this makes transparent the empty space, but not the filled shapes, I made an example in codepen:

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



来源:https://stackoverflow.com/questions/15717970/empty-and-non-clickable-filling-of-svg-paths-in-svg-edit

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!