SVG 中的 <a> 元素在 Firefox 和 Safari 上不起作用答案

【问题标题】：<a> element in an SVG doesn't work on Firefox and SafariSVG 中的 <a> 元素在 Firefox 和 Safari 上不起作用
【发布时间】：2016-11-13 01:44:01
【问题描述】：

我在为我的网站处理 SVG 元素时遇到问题。我的 SVG 分为不同的组，我需要每个组都链接到我网站的另一个页面（使用 AngularJS 构建）。说清楚：我的 SVG 代表世界，每个地区都有一个页面链接。这是我的 SVG 片段，向您展示它是如何完成这项工作的：

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

如您所见，我将每个组放入一个元素中。在 Chrome 上它运行良好，但在 Firefox 或 Safari 上测试时它不起作用，看起来链接不存在。对于如何解决这个问题，有任何的建议吗？非常感谢！

【问题讨论】：

标签： angularjs firefox svg hyperlink safari

【解决方案1】：

您需要 xlink:href 而不仅仅是 href。

href 不带 xlink 前缀是未完成的 SVG 2 规范的一个新特性，迄今为止它只在 Chrome 中实现。对裸 href 的支持将成为 Firefox 51 的一部分。

【讨论】：

@LeonardoMinati 不起作用是什么意思？根本不加载或不可点击。如果你创建一个minimal reproducible example 我可以看到还有什么问题。
这应该是最佳答案。

【解决方案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;
        }
    });

只是为每个“g”标签和一个数据属性赋予了 .region 类。也许这不是最好的解决方案，但目前它是唯一有效的解决方案。

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

【讨论】：

这打破了许多标准的浏览器行为 - 例如，您不能再右键单击打开新标签页，如果您中键单击，您会看到奇怪的行为...