Leaflet Icon not pointing directly on mouse position [duplicate]

Question

I have a project where I need to add a custom marker when the user clicks on the map. I have created my own SVG in order to show this custom marker. The problem I am facing is that the marker doesn't show correctly where the mouse has clicked.

The marker is positioned with the left top border on the mouse position. But I need the bottom of the pin to be positioned where the mouse has clicked.

 var svg = `<svg width="19px" height="29px" viewBox="0 0 19 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Combined Shape</title>
    <desc>Created with Sketch.</desc>
    <g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="2.6-Charging-rate" transform="translate(-728.000000, -436.000000)" fill="#FFFFFF">
            <g id="Group-14" transform="translate(728.000000, 436.000000)">
                <path d="M9.5,0 C14.7467051,0 19,4.32791409 19,9.66666667 C19,15.0054192 11.4233864,29 9.5,29 C7.57661364,29 0,15.0054192 0,9.66666667 C0,4.32791409 4.25329488,0 9.5,0 Z M9.5,5 C7.01471863,5 5,7.01471863 5,9.5 C5,11.9852814 7.01471863,14 9.5,14 C11.9852814,14 14,11.9852814 14,9.5 C14,7.01471863 11.9852814,5 9.5,5 Z" id="Combined-Shape"></path>
            </g>
        </g>
    </g>
</svg>`;

var iconUrl = 'data:image/svg+xml;base64,' + btoa(svg);
var icon = L.icon({
  iconUrl: iconUrl
});
this.marker = new L.Marker([e.latlng.lat, e.latlng.lng], {
  icon: icon
}).addTo(this.map);

Answer 1

I have fixed the problem by adding the iconAnchor: [10, 40] property to the icon object:

var svg = `<svg width="19px" height="29px" viewBox="0 0 19 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Combined Shape</title>
    <desc>Created with Sketch.</desc>
    <g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="2.6-Charging-rate" transform="translate(-728.000000, -436.000000)" fill="#FFFFFF">
            <g id="Group-14" transform="translate(728.000000, 436.000000)">
                <path d="M9.5,0 C14.7467051,0 19,4.32791409 19,9.66666667 C19,15.0054192 11.4233864,29 9.5,29 C7.57661364,29 0,15.0054192 0,9.66666667 C0,4.32791409 4.25329488,0 9.5,0 Z M9.5,5 C7.01471863,5 5,7.01471863 5,9.5 C5,11.9852814 7.01471863,14 9.5,14 C11.9852814,14 14,11.9852814 14,9.5 C14,7.01471863 11.9852814,5 9.5,5 Z" id="Combined-Shape"></path>
            </g>
        </g>
    </g>
</svg>`;
          var iconUrl = 'data:image/svg+xml;base64,' + btoa(svg);
          var icon = L.icon({
            iconUrl: iconUrl,
            iconAnchor: [10, 40]
          });
          this.marker = new L.Marker([e.latlng.lat, e.latlng.lng], {
            icon: icon
          }).addTo(this.map);

Answer 2

I made an SVG yesterday in Inkscape. It definitely used the centre location of my symmetric icon - a boat.

But I had the opposite problem. I needed the position to be at the front of the boat, not the centre. I solved it by doubling the height of the icon canvas and only using the bottom half for the boat. Maybe you can do something similar.

Think of the centre of the visible SVG shape and the centre of the SVG canvas as separate things. The mouse should place the marker at the centre of the SVG canvas.

In Inkscape, I used the Icon template.