У меня проблемы с добавлением и запуском прослушивателя событий с помощью javascript для этого элемента svg. Js находится внизу блока кода. Я могу без проблем установить целевой идентификатор в переменную. Он подключает прослушиватель событий и делает «что-то» при нажатии / наведении, что, кажется, является проблемой. Конечная цель - показать рамку при наведении курсора на точку, регулируя непрозрачность.
var dot15 = document.getElementById('Dot_15');
var box15 = document.getElementById('Info_Box_15');
dot15.addEventListener('mouseover', function() {
box15.style.opacity = "1";
});<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px" width = "777.6px" height = "491px" viewBox = "607.3 235.5 777.6 491" style = "enable-background:new 607.3 235.5 777.6 491;" xml:space = "preserve">
<style type = "text/css">
.st0{fill:#00A76F;}
.st1{fill:#FFFFFF;}
.st2{font-family:'BarlowCondensed-SemiBold';}
.st3{font-size:14px;}
.st4{font-family:'BarlowCondensed-Medium';}
.st5{font-size:12px;}
.st6{opacity:0.15;fill:#454544;}
#Info_Box_15 {opacity:0}
</style>
<g id = "Info_Box_15">
<polygon class = "st0" points = "1156.7,556.4 1149,548.4 1073,548.4 1073,501.4 1156.7,501.4 "/>
<text transform = "matrix(1 0 0 1 1076.6688 516.0011)"><tspan x = "0" y = "0" class = "st1 st2 st3">Gasden</tspan><tspan x = "0" y = "14" class = "st1 st4 st5">Gasden, Alabama</tspan><tspan x = "0" y = "28" class = "st1 st4 st5">89,000 sq. ft.</tspan>
</text>
</g>
<g id = "Dot_15" transform = "translate(608.399428608477,176.3959312419786)" cursor = "pointer">
<path class = "st0" d = "M548.3,389.1L548.3,389.1c1.9,0,3.5-1.5,3.5-3.5v0c0-1.9-1.5-3.5-3.5-3.5h0c-1.9,0-3.5,1.5-3.5,3.5v0
C544.9,387.5,546.4,389.1,548.3,389.1z"/>
</g>
<g id = "Site_x5F_3_x5F_Blue_x5F_Valley">
<g id = "Info_box_3">
<polygon class = "st0" points = "1018.2,467.3 1010.5,459.4 934.5,459.4 934.5,412.3 1018.2,412.3 "/>
<text transform = "matrix(1 0 0 1 938.1677 426.9739)"><tspan x = "0" y = "0" class = "st1 st2 st3">BLUE VALLEY</tspan><tspan x = "0" y = "14" class = "st1 st4 st5">Kansas City, KS</tspan><tspan x = "0" y = "28" class = "st1 st4 st5">83,224 sq. ft.</tspan></text>
</g>
<g id = "Dot_3" transform = "translate(608.399428608477,176.3959312419786)">
<path class = "st0" d = "M409.8,300L409.8,300c1.9,0,3.5-1.5,3.5-3.5v0c0-1.9-1.5-3.5-3.5-3.5h0c-1.9,0-3.5,1.5-3.5,3.5v0
C406.4,298.5,407.9,300,409.8,300z"/>
</g>
</g>Ваш код работает, хотя вам не хватает закрывающего тега svg. Все, что я вижу, не хватает, так это установки его обратно на opacity:0 на mouseout, поэтому не уверен, о чем вы спрашиваете.
Я не выкладывал весь svg, потому что это более 2000 строк. @enxaneta нет. У меня непрозрачность установлена на 0 в исходном состоянии коробки. Когда пользователь наводит курсор на точку (# Dot_15), мне нужно установить непрозрачность на «1» в поле (# Info_Box_15). Я не могу заставить dom распознавать состояние наведения / наведения указателя мыши.
Странно то, что этот фрагмент на этой странице работает по назначению, однако при локальном тестировании этого не происходит.
Включаете ли вы встроенный SVG в свой HTML? Или ты как <img> загружаешь что ли?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я не очень уверен, что понимаю вас. Считаете ли вы, что добавление другого прослушивателя событий при отпускании мыши и установка непрозрачности 0 решит вашу проблему?