There are multiple ways to fix your solution. As another answer here states, you may bind click events to the relevant element of your SVG graphics -- like an explicitly defined hitbox for the arrow, the entire arrow, the tip of it or whatever else.
Another solution, and I personally think it's the one you should be preferring -- because your SVG dimensions are seemingly arbitrary and do not make much sense considering it's just hardcoded and your arrow occupies just part of it. What you want is to correct your SVG document viewport through the use of the
viewBox attribute on your SVG elements.
The SVG specification covers it very well, but in short your problem is that your SVG has the dimensions of 100 x 100 pixels, while the arrow graphics it renders are much smaller. Remove
height attributes from the root SVG element, add the
viewBox attribute instead with appropriate values for the viewport (sizing it to the bounding box of your arrow graphics), and use CSS to control rendered dimensions of your
svg elements on the map.