Hallo liebe Community.

Vorab: ich bin kein Profi-Coder und habe sicherlich nicht die besten Lösungen für meine Probleme gefunden ;D
Jetzt tritt bei mir aber ein Problem auf, dass ich selbst gar nicht mehr lösen kann.

Ich versuche in eine Homepage ein SVG Element einzubinden.
Eine Karte mit Orten darauf. Klickt man auf die Orte so soll sich ein zuvor definiertes HTML element öffnen und je nach Ort bestimmte Inhalte anzeigen.

Soweit so gut. In Google Chrome funktioniert bei mir alles bestens. Habe eine kleine Animation im js die in die Karte zoomt (leider alles hard coded) und dann das Fenster aufbaut und beim schließen des aufgebauten Fensters wieder auf die ursprüngliche Größe der Karte zoomt.

Versuche ich nun alllerdings in Firefox auf einen der Orte zu klicken tut sich rein gar nichts. Andere Javascripts werden aber richtig dargestellt, daher vermute ich liegt der Fehler am SVG Element innerhalb der HTML Datei. Da ich mich mit SVG noch nicht so gut auskenne habe ich die Datei mit Adobe Illustrator erzeugt und einfach in die HTML Datei eingefügt. Alles was für mich dabei offensichtlich überflüssig war habe ich aus dem Code gelöscht. Angezeigt wird die SVG in allen Browsern korrekt, allerdings funktioniert das Event Handling nicht überall korrekt.

Hier die Code-Auszüge

  
  
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"  
	 viewBox="0 0 283.5 283.5" enable-background="0 0 283.5 283.5" onmousedown="mouseClick()">  
  
<path fill="#DBDBDB" stroke="#000000" stroke-miterlimit="10" d="M19.5,88.1c-0.1-1.4,0.8-2.6,2.2-2.9c3.1-0.7,8.1-1.8,9.2-1.8  
	c1.5,0,2.2-6.1,4.2-6.6s15.7,9,24.5,6.3c2.4-0.7,5.9-4.4,7.5-5.3c0.9-0.5,9.1-0.4,11.4-0.3c0.4,0,0.8-0.1,1-0.4l4.8-4.4  
	c0.6-0.5,0.6-1.4,0.1-1.9L76,61.4c-0.5-0.6-0.5-1.4,0-2l7.1-8c0.4-0.5,1.1-0.7,1.7-0.7l2.2,0.2c0.6,0,1.3-0.2,1.7-0.7l8.3-9.6  
	c0.6-0.7,1.4-1.1,2.2-1.2l19.4-1.4c0.6-0.1,1.2-0.3,1.8-0.7c3.2-2.3,17-10.6,21.8-11.2c3.3-0.4,1.2-11.8,1.6-12.9  
	c0.3-0.8,3-1.8,3.6-1.2l6,5c0.5,0.6,4.5,6.1,5.1,6.4l4.6,1.4c0.7,0.2,1.2,1.1,1.6,1.9c0.2,0.3,0.4,0.6,0.8,0.8l1.8,0.9  
	c0.6,0.3,0.7,0.9,0.9,1.6l0.4,3.3c0.4,0.6-1.4,2.5-1.8,3.5l0.9,4c0.3,1.3-0.7,2.6-2,2.8l0,0c-0.3,0-0.6,0.3-0.6,0.6l-0.4,3.2  
	c-0.1,0.6,0.4,1.2,1,1.3l2.9,0.4c0.9,0.1,1.6,0.7,1.9,1.5l0.9,2.2c0.5,1.4-0.1,2.9-1.4,3.5l-5.1,2.4c-1,0.4-1.1,1.8-0.2,2.4l4.7,3.3  
	c0.8,0.5,1.7,0.6,2.6,0.3l13.4-3.9l18.2-7.4c2-0.8,3.1-2.8,2.9-4.9l-1.1-9.8c-0.1-0.9-0.4-1.7-0.8-2.4l-3.8-10.2  
	c-0.1-0.4-0.3-0.7-0.6-1l-4.4-5c-0.5-0.8,0.1-1.9,1-2l9.1-1.5c0.3-0.1,0.6-0.2,0.9-0.3l8.7-6.4c0.8-0.6,1.8-0.8,2.8-0.5l2.4,0.7  
	c1.3,0.4,2.3,1.4,2.7,2.6l2.5,6.8c0.5,1.5,1.8,2.6,3.4,2.9l5.3,0.9c0.9,0.2,5.5-1.7,6.1-2.4l4.4-5.5c1.5-1.2,5.3,2.6,5,4.5l-4.5,6.9  
	c-0.2,0.3-0.4,0.7-0.5,1.1l-4.2,15.5c-0.4,1.3-0.1,2.7,0.8,3.8l8.7,11.2c0.2,0.2,0.3,0.4,0.4,0.7l7.2,14.5c0.2,0.3,0.3,0.6,0.5,0.9  
	L267,85c0.3,0.3,0.5,0.6,0.9,0.9l2.4,1.8c1.3,1,1.8,2.6,1.4,4.1l-0.6,2.3c-0.3,0.9-0.1,1.9,0.4,2.7l1.2,2.1c0.5,0.9,0.2,2-0.6,2.6  
	l0,0c-0.6,0.4-1,0.9-1.1,1.6l-2.6,12.4l-0.8,9.3c-0.1,0.6-0.3,1.2-0.6,1.7l-5.8,8.6c-0.5,0.8-1.4,1.1-2.3,0.9l-4.5-1.2  
	c-0.8-0.2-1.5-0.8-1.9-1.6l-1.3-3c-0.3-0.7-0.9-1.3-1.7-1.5l-3.1-0.8c-0.9-0.2-1.8,0-2.5,0.5l-3.1,2.5c-0.6,0.5-1,1.2-1.2,2  
	l-0.9,5.7c-0.2,1.1-1.1,1.9-2.2,1.9l-6.5,0.2c-0.9,0-1.7,0.3-2.5,0.7l-8,4.6c-1,0.6-1.8,1.4-2.3,2.5l-2.9,6.1  
	c-0.4,0.9,0.2,2,1.2,2.1l3.7,0.4c1.2,0.1,2.1,1.1,2.2,2.3l0.2,13.3c0,1.4-0.7,2.7-2,3.4l-9,4.9c-1.2,0.7-2,1.8-2.3,3.2l-0.8,4.3  
	c-0.1,0.6-0.4,1.1-0.8,1.6l-9,9.8c-0.2,0.3-0.5,0.5-0.9,0.7l-8.1,3.6c-0.4,0.2-0.7,0.4-1,0.7c-0.9,0.8-2.6,2.5-3.3,3.1  
	c-0.2,0.2-0.3,0.4-0.4,0.6c-0.5,1.1-2.2,4.5-2.2,4.5l-1.6,5.2c-0.5,1.1-3.2,1.9-4.3,1.3l-7-5.2c-0.5-0.4-0.9-0.8-1.2-1.3l-9.8-14.4  
	c-0.8-1.2-5.8-0.7-6.7,0.4l-6.8,10.6c-0.8,1.2-1.9,2.1-3.2,2.7c-0.5,0.3-1,0.6-1.5,1l-3.6,2.8c-1.2,0.9-2.6,1.4-4.1,1.6l-6.1,0.3  
	c-1.9,0.7-3.5,2-4.7,3.6L117,228c-1.2,1.7-3,2.8-5.1,3.1l-11,1.3c-0.8,0.1-1.5,0.3-2.2,0.6L88,237.5c-1.4,0.6-2.4,2-2.4,3.5  
	l-0.2,6.4c0,1.1-1.1,2-2.2,1.8l-4.3-0.9c-1-0.2-2.1,0.2-2.7,1.1l-0.9,1.2c-0.6,0.8-0.7,1.8-0.4,2.7l1.6,5.2c0.3,1,0.1,2.2-0.6,3  
	l-0.9,1.1c-0.9,1.1-2.4,1.3-3.7,0.7l-13.6-7.4c-0.9-0.5-2-0.2-2.6,0.6l-2.5,5c-0.3,0.5-1.2,0.6-2,0.6c-0.8,0-1.5-0.3-2.2-0.7  
	l-1.9-1.3c-1.2-0.8-2.1-2.1-2.3-3.6l-0.9-7c-0.2-1.5-1.1-2.9-2.5-3.6l-6.4-3.6c-1-0.6-1.5-1.7-1.2-2.8L35,231  
	c0.2-1.1-0.3-2.2-1.2-2.6l-1.4-0.7c-0.7-0.4-1.3-1-1.5-1.7l-2.3-6.3c-0.3-0.8-0.9-1.4-1.7-1.7l-4.5-1.6c-1.7-0.6-2.8-2.2-2.8-3.9  
	l-0.2-22.7c0-2.3-1.8-4.2-4.1-4.5L13,185c-1.5-0.2-2.6-1.4-2.5-2.9l0.1-5.3c0-1.3,0.8-2.4,1.9-3L15,174c1.5,0.1,3.1-0.3,4.3-1.2  
	l8.9-6.4c1.3-0.9,1.6-2.6,0.9-4l-1.9-3.3c-0.6-1.1-0.6-2.5,0-3.6l8.2-14.2c0.6-1.1,0.7-2.4,0.2-3.5l-0.2-0.4  
	c-0.8-1.7-0.7-3.6,0.1-5.3l1.4-2.8c0.7-1.3,0.6-2.8-0.1-4.1l-12.5-21.1c-0.5-0.9-0.7-1.9-0.7-2.9l0.1-1.8c0.1-1.5-0.6-2.9-1.9-3.7  
	l0,0c-1.2-0.7-1.9-1.9-2-3.3L19.5,88.1z"/>  
  
<text class="svgText" x="106" y="55">Ort</text>  
<!--Ort--><rect x="100" y="50" fill="#8AB5E2" width="5" height="5"/>  
  
<text class="svgText" x="81" y="85">Ort</text>  
<!--Ort--><rect x="75" y=80" fill="#8AB5E2" width="5" height="5"/>  
  
<text class="svgText" x="45" y="95">Ort</text>  
<!--Ort--><rect x="40" y="90" fill="#8AB5E2" width="5" height="5"/>  
  
<!-- usw. für einige weitere Orte-->  
	  
</svg>

Der dazugehörige js-code:
Hier nicht dabei sind einige Arrays, die die Informationen für die jeweiligen innerHTMLs beinhalten (Datenschutz und so).

  
function mouseClick(e){  
  
var map = document.getElementById('svg');  
var box = document.getElementById('Infobox');  
var boxCloser = document.getElementById('InfoboxCloser');  
var j;  
  
if(!e) e = window.event;  
if(!e.target) e.target = e.srcElement;  
	  
if(e != 'reset'){  
	for(j=0; j<Orte.length; j++){	  
		if(e.target.textContent == Orte[j] || e.target.innerHTML == Orte[j]){  
				  
				document.getElementById('Ueberschrift1').innerHTML = Ueberschrift[j];  
				document.getElementById('Ort').innerHTML = Ort[j];  
				document.getElementById('OrtBeschreibung').innerHTML = OrtBeschreibung[j];  
				document.getElementById('Text').innerHTML = Text[j];  
				  
				map.style.width = '100%';  
				map.style.height = '100%';  
				map.style.marginLeft = x[j];  
				map.style.marginTop = y[j];  
		  
				setTimeout(function(){  
					map.style.width = '200%';  
					map.style.height = '200%';  
				}, 200);  
				setTimeout(function(){  
					$('#greyBox').fadeIn(1500);  
					$('#Infobox').fadeIn(300);  
					box.style.width = '800px';  
					box.style.height = '640px';  
					//box.style.margin = '10px';  
				}, 1200);  
				setTimeout(function(){  
					boxCloser.style.display = 'block';  
					$('#imgContainer > h1').fadeIn(100);  
					$('#Infobox > h1').fadeIn(100);  
					$('#Infobox > h2').fadeIn(100);  
					$('#imgContainer > hr').fadeIn(100);  
					$('#LogoProject').fadeIn(100);  
					$('#imgDiv').fadeIn(100);  
					$('.MainInfoImg').fadeIn(100);  
					$('#imgDiv > img').fadeIn(100);  
					$('#Infobox > p').fadeIn(100);  
				}, 2200);  
			}  
		}  
	}  
}