Eu tenho um mapa do Google com várias sobreposições SVG. Mas quando adiciono um evento de clique a esses SVG, toda a sobreposição é clicável e quero que funcione apenas para o caminho SVG.

Aqui está um violinohttps://jsfiddle.net/gmkfhr9s/1/

Estou usando oSobreposições personalizadas documentação como basehttps://developers.google.com/maps/documentation/javascript/customoverlays

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';
  });
};

Você pode ver que, com o evento mouseover, toda a sobreposição (a caixa delimitada) está selecionada e apenas o SVG.

É possível tornar apenas o SVG clicável?

estefio é um problema semelhante se isso puder ajudá-lo.

EDIT:

A resposta de @ Sphinxxx funciona bem.

Eu só quero acrescentar que, se você tiver vários SVGs com alguns acima de outros, precisará adicionar este CSS para poder clicar neles.

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