jquery - Custom Context Menu Position on right clicking svg element

Question

I am trying to implement Bootstrap 4 dropdown as a Context Menu. Everything is working fine but Facing issue with the left and top css property of the drop down.

THE DOM STRUCTURE?

<div class="col">
    <div class="dropdown-menu dropdown-menu-right shadow-sm" style="width: 15rem;" id="contextMenu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
    <div class="h-75">
        <svg id="preview" class="shadow" height="100%" viewBox="0 0 1920 1080"
             preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
            <g class="sjx-svg-wrapper">
                <image id="blabla" class="drag-svg"
                       href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200"
                       width="200"/>
            </g>
        </svg>
    </div>
</div>

WHAT I HAVE TRIED?

    $(document).on("contextmenu", 'g.sjx-svg-wrapper', function (e) {
        // TRIES HERE
        let left = e.offsetX;
        let top = e.offsetY;

        $("#contextMenu").css({
            display: "block",
            left: left,
            top: top
        }).addClass("show");

        return false;
    });

WHAT IS THE PROBLEM?

The problem is that the dropdown doesn't show exactly at the pointer like the normal context menu appears where we right click.

And also when the width of the svg container changes, the dropdown position misplaces(even after right clicking again).

I have tried other solutions using offsets but not getting to a point. So please provide a reliable way to solve this.

Answer 1

Maybe it is just about using event.pageX and event.pageY instead of event.offsetX and event.offsetY...

.offsetX:

The offsetX read-only property of the MouseEvent interface provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.

.pageX:

The pageX read-only property of the MouseEvent interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document.

$(document).on("contextmenu", 'g.sjx-svg-wrapper', function(e) {
  // TRIES HERE
  let left = e.pageX;
  let top = e.pageY;

  $("#contextMenu").css({
    display: "block",
    left: left,
    top: top
  }).addClass("show");

  return false;
});

#contextMenu{
  display:none;
  position: absolute;
  padding: 20px;
  background-color: white;
  border: 1px solid red;
  box-shadow: 2px 2px grey;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <div class="dropdown-menu dropdown-menu-right shadow-sm" style="width: 15rem;" id="contextMenu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
  <div class="h-75">
    <svg id="preview" class="shadow" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
            <g class="sjx-svg-wrapper">
                <image id="blabla" class="drag-svg"
                       href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200"
                       width="200"/>
            </g>
        </svg>
  </div>
</div>

<div id="contextMenu">CONTEXT</div>