<a> Element in einem SVG funktioniert nicht auf Firefox und Safari

Question

Ich habe ein Problem bei der Arbeit an meinem SVG-Element für meine Website. Mein SVG ist in verschiedene Gruppen unterteilt und ich brauche jede Gruppe als Link zu einer anderen Seite meiner Website (die mit AngularJS erstellt wurde). Um es klar zu stellen: Mein SVG repräsentiert die Welt und für jede Region gibt es einen Link zu einer Seite. Hier ist ein Fragment meiner SVG Ihnen zu zeigen, wie es versucht, den Job zu erledigen:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 719.2 357.8"> 
    <a href="#!/resellers/?scrollTo=northamerica"> 
     <g id="northamerica"> 
      .... 

wie Sie i jede Gruppe in ein Element setzen sehen. Auf Chrome funktioniert es einwandfrei, aber wenn es in Firefox oder Safari getestet wird, funktioniert es nicht, es sieht aus, als wäre der Link nicht da. Irgendwelche Vorschläge, wie Sie das beheben können? Ich danke dir sehr!

Answer 1

Sie brauchen xlink: href anstatt nur href.

href ohne ein xlink-Präfix ist eine neue Funktion der noch nicht abgeschlossenen SVG 2-Spezifikation, die bisher nur in Chrome implementiert wurde. Unterstützung für bare href wird Teil von Firefox 51.

Answer 2

Eigentlich habe ich den Job mit JQuery und $ location.path(). Hier ist der Code, wenn jemand es brauchen:

$('.region').click(function() { 
     var region = $(this).attr('data-region'); 
     switch (region) { 
      case 'northamerica': 
       $location.path('/resellers').search({ 
        scrollTo: 'northamerica' 
       }); 
       break; 
      case 'southamerica': 
       $location.path('/resellers').search({ 
        scrollTo: 'southamerica' 
       }); 
       break; 
      case 'asia': 
       $location.path('/resellers').search({ 
        scrollTo: 'asia' 
       }); 
       break; 
      case 'africa': 
       $location.path('/resellers').search({ 
        scrollTo: 'africa' 
       }); 
       break; 
      case 'australia': 
       $location.path('/resellers').search({ 
        scrollTo: 'australia' 
       }); 
       break; 
      case 'europe': 
       $location.path('/resellers').search({ 
        scrollTo: 'europe' 
       }); 
       break; 
      default: 
       break; 
     } 
    }); 

gab einfach die .region Klasse zu jedem „g“ Tag und ein Datenattribut. Vielleicht ist es nicht die beste Lösung, aber im Moment ist es die einzige, die funktioniert.

Wenn jemand eine bessere Arbeit hat, posten Sie es einfach! ;)