I want to get the relative mouse coordinates to the blue div on mouse click, but ALSO apply the hover style. The problem is: If I use the "pointer-events=visible" property setting, the relative coordinates to the polygon-bounding-box will be returned, not relative to the container div. If I use "pointer-events:none", the coordinates are correct but hover style is missing. I'm using AngularJS but I want to avoid JQuery.
Here is my JSFiddle: https://jsfiddle.net/aun47wxo/
**JS**
var mydiv = document.getElementById("myDiv");
mydiv.onclick = function(event) {
var rect = event.target.getBoundingClientRect();
alert((event.clientX-rect.left).toString().concat("; ",(event.clientY-rect.top).toString()));
}**CSS**
polygon {
stroke-width: 5;
stroke: red;
fill: none;
pointer-events:visible;
/*setting to "none" will return the right
coordinates but the hover style will missing
*/
}
polygon:hover {
fill: red;
}**HTML**
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<br><br><br>
<div id="myDiv" style="background-color:blue">
<object id="svg" type="image/svg+xml">
<svg viewBox="0 0 999 799">
<polygon points="445,161 345,174 500,10" />
<polygon points="445,161 345,174 500,270"/>
</svg>
</object>
</div