Menu
I have a SVG overlaying a div with a button. I know that i can pass mouse-events through the SVG by setting "pointer-events: none;" for my SVG. However when I do this the SVG wont recognize mouse-events anymore.
<body>
<div id="website">
<form action="input_button.htm">
<p>
<textarea cols="20" rows="4" name="text"></textarea>
<input type="button" name="Text 1" value="show text"
onclick="this.form.text.value='Test'">
</p>
</form>
</div>
<div id="svgRect">
<svg width="1845" height="140">
<rect id="r0"></rect>
</svg>
</div>
</body>
I want my SVG to be able to recognize when the mouse is over it but pass clicks to elements (divs/ buttons / ...) underneath itself. So my SVG should only be the target of hover-events and my button should be the target of click-events.
Among some other approaches I tried it like this: - Nothing worked.
.on("mousedown", function(d,i){
d3.select("#r0")
.style("pointer-events", "none");
d3.select("#website")
.style("pointer-events", "auto");}
.on("mouseup", function(d,i){
d3.select("#r0")
.style("pointer-events", "auto");
d3.select("#website")
.style("pointer-events", "none");
}
The idea was to disable pointer-events when I press the mouse-button and enable them again when I release it.
Does anyone know a solution or work-arround for this problem? Thanks!
309
The simplest way to make a portion of an SVG clickable is to add an SVG hyperlink element to the markup. This is as easy as wrapping the target with an <a> tag, just as you would a nested html element. Your <a> tag can surround a simple shape or more complex paths. It can surround a group of SVG elements or just one.
Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). The pointer is a hardware-agnostic device that can target a specific set of screen coordinates.
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.
Here is a easier solution:
Keep pointer-events: none; in the svg, but add pointer-events: fill to the poligon, path or whatever your button is, with this, the empty space is transparente, but the button is sensible to click
https://stackoverflow.com/a/29319009/2594391
56
I found a solution to my problem. It is possible to traverse through all underlying elements with the elementFromPoint(x,y); function. I wrote a helper-function that checks if the first selected element is a SVG - if it is one its' display is set to "none" and the next element is selected.
function get_element_under_svg(x,y){
var resulting_element;
var first_element = document.elementFromPoint(x,y);
//check if first_element is a svg
if (first_element.nodeName == "rect") {
_display = first_element.style.display; //save display of svg
first_element.style.display = "none"; // make svg invisible
resulting_element = document.elementFromPoint(x,y);
first_element.style.display = _display; // reset display
} else {
resulting_element = first_element;
}
return resulting_element;
}
return lower_element;
}
At the end of the day I set pointer-events: auto for my SVG and for my div:
#website{
pointer-event: auto;
}
svg{
pointer-event: auto;
}
And to my svg I added the following:
.on("click", function(d,i) {
var element = get_element_under_rect( mouse.x, mouse.y );
element.click(); // simulate click on the underlying element
});
With this approach my SVG is still capable to receive hover- or click-events, while it is able to pass clicks to underlying elements. See also https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint
Thanks for the other approaches!
28
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