Tengo un mapa de Google con varias superposiciones SVG. Pero cuando agrego un evento de clic en estos SVG, se puede hacer clic en toda la superposición y quiero que funcione solo para la ruta SVG.

Aquí hay un violínhttps: //jsfiddle.net/gmkfhr9s/1

Estoy usando la Superposiciones personalizadas documentación como basehttps: //developers.google.com/maps/documentation/javascript/customoverlay

USGSOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.borderStyle = 'dotted';
  div.style.borderWidth = '2px';
  div.style.borderColor = 'white';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);

  //add element to clickable layer
  this.getPanes().overlayMouseTarget.appendChild(div);

  google.maps.event.addDomListener(img, 'mouseover', function() {
    img.style.opacity = '0.5';
  });
  google.maps.event.addDomListener(img, 'mouseout', function() {
    img.style.opacity = '1';
  });
};

uede ver que, con el evento mouseover, se selecciona toda la superposición (el cuadro delimitado) y solo el SVG.

Es posible hacer que solo se pueda hacer clic en el SVG?

Estahil es un problema similar si esto puede ayudarte.

EDIT:

a respuesta de @@ Sphinxxx funciona bien.

Solo quiero agregar eso, si tiene varios SVG con algunos de ellos por encima de otros, tendrá que agregar este CSS para poder hacer clic en ellos.

svg {
  pointer-events: none;
}
path {
  pointer-events: all;
}