Невозможно добавить прослушиватель событий во вложенный элемент SVG

У меня проблемы с добавлением и запуском прослушивателя событий с помощью 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>

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

enxaneta 10.12.2018 16:19

Ваш код работает, хотя вам не хватает закрывающего тега svg. Все, что я вижу, не хватает, так это установки его обратно на opacity:0 на mouseout, поэтому не уверен, о чем вы спрашиваете.

Chris W. 10.12.2018 16:20

Я не выкладывал весь svg, потому что это более 2000 строк. @enxaneta нет. У меня непрозрачность установлена ​​на 0 в исходном состоянии коробки. Когда пользователь наводит курсор на точку (# Dot_15), мне нужно установить непрозрачность на «1» в поле (# Info_Box_15). Я не могу заставить dom распознавать состояние наведения / наведения указателя мыши.

Brad 10.12.2018 16:50

Странно то, что этот фрагмент на этой странице работает по назначению, однако при локальном тестировании этого не происходит.

Brad 10.12.2018 17:13

Включаете ли вы встроенный SVG в свой HTML? Или ты как <img> загружаешь что ли?

Paul LeBeau 11.12.2018 11:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
280
0

Другие вопросы по теме