I use jsPlumb - jQuery plugin to connect two points - but the connecting line is overlaying the labels
HTML
<input type="radio" id='moznost-1' name="odpoved">
<label for="moznost-1" class="odpoved-label">
<span class="radio-moznost">radost</span>
</label>
(Radio is hidden, I bind endPoint on label) When I connect one point with another and the connection line goes cross the label - it overlays the label - I noticed some z-indexes (I derivated this from demo), but setting a much higher z-index(<svg> connection-line(path) element has z-index: 18, so I tried about z-idex: 50) for label doesnt help at all - what am I doing wrong?
(PS: If there is anything unclear feel free to comment I will provide you with more info if needed)
So I did a bit of a digging - finding out - firstly it seemed that z-index affects elements only if they are in a same "language scope" - e.g. HTML z-index X SVG z-index , BUT then one person commented on the answer (link below) that it can be done without adding text to svg... So the final conclusion seems to be that z-index set in the jsPlumb code doesnt work properly ...
Big thanks for put-text-to-svg tip belongs to @TaronPro for answer to my more general question and to @BigBadaboom for commenting about the fact it can be done with HTML & SVG simultaneously:
JavaScript - Is there a way how to draw SVG path UNDER the content?