无法将事件侦听器添加到嵌套的SVG元素

时间:2018-12-10 15:09:56

标签: javascript svg addeventlistener

我在此svg元素上添加和触发带有javascript的事件监听器时遇到问题。 Js在代码块的底部。我可以将目标ID设置为变量没问题。它附加了一个事件侦听器,并在单击/悬停上执行“某些操作”,这似乎是问题所在。最终目标是通过调整不透明度将鼠标悬停在点上时显示该框。

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 个答案:

没有答案