I have the following svg
<g id="end" transform="translate(125,125)">
<path fill="#4DB3B3" d="M50,2.333C23.674,2.333,2.333,23.674,2.333,50S23.674,97.667,50,97.667S97.667,76.326,97.667,50S76.326,2.333,50,2.333z
M82.771,58.973H17.229c-0.862,0-1.561-0.699-1.561-1.561V42.587c0-0.862,0.699-1.561,1.561-1.561h65.542
c0.862,0,1.561,0.699,1.561,1.561v14.825C84.332,58.274,83.633,58.973,82.771,58.973z"/>
<title>End</title>
</g>
The generated svg looks like
If I were to drag from the blue area the dragging works fine.
The only issue I am facing is whenever I try to drag from the center (white area), the event listener doesn't fire. As if the white area in the middle is not part of the SVG.
How can I tackle this issue ?