я есть карта Google с несколькими наложениями SVG. Но когда я добавляю событие щелчка для этих SVG, все наложения активируются щелчком мыши, и я хочу, чтобы оно работало только для пути SVG.

Вот скрипкаhttps://jsfiddle.net/gmkfhr9s/1/

Я используюПользовательские оверлеи документация как основаhttps://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';
  });
};

Вы можете видеть, что с событием mouseover все оверлей (рамку с рамкой) выбран и только SVG.

Можно ли сделать только SVG кликабельным?

Этотнить похожая проблема, если это может вам помочь.

РЕДАКТИРОВАТЬ :

@ Sphinxxx ответ работает хорошо.

Я просто хочу добавить, что если у вас есть несколько SVG с некоторыми из них выше других, вам нужно будет добавить этот CSS, чтобы иметь возможность нажимать на них.

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