Menu
I have a map with SVG text elements to name the locations. I want the locations (shapes) to be clickable, and they are, but because the text elements are on top of them, if someone hovers over a text element and clicks, then nothing happens because the shape was not clicked : the text element was. How can I make it so that if the text element is clicked, the click goes "through" it and to the shape ?
476
But most importantly, what's the best way to make SVG text editable? document. getElementById("element"). contentEditable = "true"; You can also use the ref contenteditable="true" in an HTML element like so: <div contenteditable="true"> .
The SVG element has the tag name svg. It has attributes like width, height, viewBox, and so on. To click the element with svg, we should identify the element then utilize the Actions class. We shall first move to that element with the moveToElement method and then apply the click method on it.
SVG 1.2 introduces editable text fields, moving the burden of text input and editing to the user agent, which has access to system text libraries.
SVG treats a text element in much the same way that it treats graphical and shape elements. You position text with x and y coordinates and use fill and stroke options to color text the same way you would with a <circle> or <rect> element.
Mozilla introduced a CSS property for this purpose called pointer-events. It was originally limited to SVG shapes, but is now supported on most DOM elements in modern browsers:
span.label { pointer-events: none; } The answer to this question has some good information on achieving the same result in old IE:
css 'pointer-events' property alternative for IE
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
