Вероятно, go я бы сказал о ti несколько иначе, чем вы предложили. Если у вас есть куча слушателей событий на самих путях, я просто поместил слушателя на каждый из svgs. При срабатывании он проверяет tagName элемента, который был нажат. Если это не путь, значит, не было выбрано ничего допустимого, поэтому удалите стиль со всех путей. Если, с другой стороны, выбранный элемент был путем, мы получаем от него имя класса, удаляем «всплывающую подсказку», а затем применяем стиль ко всем совпадающим путям, удаляя его одновременно со всеми, которые не совпадают.
О, и я также удалил встроенные обработчики событий из путей - теперь они прикреплены с js ко всему изображению.
"use strict";
window.addEventListener('load', onLoaded, false);
function onLoaded(evt) {
let svgsOnPage = Array.from(document.querySelectorAll('svg'));
svgsOnPage.forEach(svg => svg.addEventListener('click', onSvgClick, false));
}
function onSvgClick(evt) {
let clickedElement = event.target;
if (clickedElement.tagName == 'path') {
let classToHighlight = Array.from(clickedElement.classList).join(' ').replace('tooltip ', '');
let pathElems = Array.from(document.querySelectorAll('path'));
pathElems.forEach(
path => {
if (path.classList.contains(classToHighlight)) {
path.style.fill = 'white';
path.style.opacity = "0.5";
} else {
path.style = '';
}
}
);
} else {
let paths = Array.from(document.querySelectorAll('path'));
paths.forEach(path => {
path.style = '';
});
}
}
svg {
background-color: #555;
/* used since the linked files aren't avail */
}
<!-- Left column -->
<div class='diagram' style="width:calc(50% - 49px); float:left; height: 85%; background-image: url(Images/mudpuppy_sideview.png); background-repeat: no-repeat; background-size:contain;" id="leftCol">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 612" style="enable-background:new 0 0 792 612;" xml:space="preserve">
<style type="text/css">
.tooltip{opacity:0;fill:#FFFFFF;}
</style>
<path id="mud_intermandibularis" class="tooltip intermandibularis" title="Intermandibularis" d="M185.78,232.53c-3.77-6.28-32.12,3.11-42.47,5.87c-10.36,2.76-39.02,8.98-41.44,14.5
c-1.78,4.07,43.88,31.14,67.86,31.42c8.58,0.1,11.4-8.12,12.78-17.61C183.19,261.95,190.96,241.16,185.78,232.53z"/>
<path id="mud_levator_mandibulae_externus" class="tooltip" title ="Levator mandibulae externus" d="M139.76,287.52c6.37-3.09,21.24-4.4,27.19,0
c5.96,4.4,32.63,21.76,38.07,24.35s33.93,16.32,32.37,23.05c-1.55,6.73-20.46,17.09-39.11,11.14
c-18.65-5.96-77.96-20.65-81.06-29.75l31.86,6.18c0,0-17.61-4.14-19.94-12.17C126.81,302.28,131.22,291.66,139.76,287.52z"/>
<path id="mud_branchiohyoideus" class="tooltip" title="Branchiohyoideus" d="M180.94,290.11c-1.61-6.62,26.68-30.82,31.34-33.93c4.66-3.11,30.82-13.73,35.48-11.4
c4.66,2.33,15.8,35.22,17.09,45.32c1.29,10.1,6.47,23.83,9.06,28.23c2.59,4.4,12.69,15.8,1.81,17.61c-10.88,1.81-30.04,6.73-32.89,0
c-2.85-6.73-18.91-16.83-26.94-21.5S183.27,299.69,180.94,290.11z"/>
<path id="mud_interhyoideus" class="tooltip" title="Interhyoideus" d="M213.06,219.4c-5.67,0.65-21.76,9.58-23.05,16.32c-1.29,6.73-4.4,19.3-5.18,21.56
c-0.78,2.26-1.81,20.14-1.04,20.39c0.78,0.26,20.46-19.68,23.83-22.01c3.37-2.33,28.61-11.4,29.85-12.43
c1.23-1.04-9.38-6.73-10.94-10.36S222.12,218.37,213.06,219.4z"/>
<path id="mud_procoracohumeralis" class="tooltip" title="Procoracohumeralis" d="M256.31,249.96c-2.08,1.97,4.4,10.62,27.71,15.8c23.31,5.18,69.67,2.07,82.36-3.11
c12.69-5.18,27.59-13.61,29.98-18.2c2.39-4.59-27.13-3.29-34.13-3.81c-6.99-0.52-30.04-4.4-41.7-2.85
c-11.65,1.55-47.91,9.06-50.5,9.06C267.45,246.86,261.23,245.3,256.31,249.96z"/>
</svg>
</div>
<!-- Right column -->
<div class="diagram" style="width:calc(50% - 49px); float:right; height: 85%; background-image: url(Images/shark_sideview.png); background-repeat: no-repeat; background-size:contain;">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 792 612" style="enable-background:new 0 0 792 612;" xml:space="preserve">
<style type="text/css">
.tooltip{opacity:0;fill:#FFFFFF;}
</style>
<path id="shark_intermandibularis" class="tooltip intermandibularis" title="Intermandibularis" d="M248.8,325.07c0,0-4.14,4.92-10.36,5.96c-6.22,1.04-18.39,0-18.39,0
s8.55,13.47,22.01,15.28c13.47,1.81,49.73-2.59,50.24-6.47S251.39,325.33,248.8,325.07z"/>
<path id="shark_adductor_mandibulae" class="tooltip" title="Adductor mandibulae" d="M238.78,286.57c0,0-6.22-13.12-16.92-13.64c-10.71-0.52-21.76,4.83-24.35,17.78
c-2.59,12.95,6.56,26.24,9.15,30.04c2.59,3.8,9.67,8.29,13.38,8.98c3.71,0.69,23.4,2.59,29.44-6.91s2.76-24.35,0-27.8
S241.03,287.78,238.78,286.57z"/>
<path id="shark_x32_nd_dorsal_constrictor" class="tooltip" title="2nd dorsal constrictor" d="M247.76,288.99c0,0-5.87-3.45-6.91-5.01c-1.04-1.55-5.53-9.22-9.15-11.08
s-16.75-1.87-16.75-1.87s9.69-9.5,10.02-12.6c0.34-3.11,11.39-23.48,19.67-27.28c8.29-3.8,29.7-7.6,41.78,1.04
c0,0-14.68,19.51-16.06,23.65C269,259.98,258.47,283.63,247.76,288.99z"/>
</svg>
</div>