<a> element in an SVG doesn&#39;t work on Firefox and Safari

Question

I have an issue working on my SVG element for my website. My SVG is divided in different groups and i need each group to be a link to another page of my website (which is build with AngularJS). To make it clear: my SVG represents the world and for each region there's a link to a page. Here's a fragment of my SVG to show you how it tried to do the job:

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

as you can see i put each group into an element. On Chrome it works perfectly, but when tested on Firefox or Safari it doesn't work, it looks like the link isn't there. Any suggestions on how to fix this? Thank you so much!

Answer 1

你需要xlink：href而不仅仅是href。

没有xlink前缀的href是未完成的SVG 2规范的新功能，该规范迄今仅在Chrome中实现。支持裸href将成为Firefox 51的一部分。

Answer 2

实际上我使用JQuery和$ location.path（）完成了这项工作。如果有人需要，请输入以下代码：

$('.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;
        }
    });

给每个＆＃34; g＆＃34;给了.region课程。标签和数据属性。也许它不是最好的解决方案，但就目前而言，它是唯一有效的解决方案。

如果有人有更好的工作，请发布！ ;）