SVG <a> 标签在 Safari 中不起作用答案

【问题标题】：SVG <a> tags don't work in SafariSVG <a> 标签在 Safari 中不起作用
【发布时间】：2017-09-13 16:58:33
【问题描述】：

我的 svg 中的 <a> 标记完美地链接到我在 Google Chrome 中的模式。但是，在 Safari 中，链接不起作用。我认为这是一个模态问题，但我测试了打开一个单独的模态并且它有效。我认为问题在于 svg，但我无法让它工作。任何帮助将不胜感激。

SVG html

<object>
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1190px" height="1261px" viewBox="0 0 1190 1261" enable-background="new 0 0 1190 1261" xml:space="preserve">
        <a href="#openRoom4_1">
            <polygon class="roomSVGs" fill="blue" points="626,259 827,324 980,191 775,137   "/>
        </a>
    </svg>
</object>

模态html

        <div id="openRoom4_1" class="modalDialog">
            <div class="roomModal">
                <a href="#close" title="Close" class="close">&times;</a>
                <h2>Room 4.1</h2>
                   <p>Hi</p>
            </div>
        </div>

【问题讨论】：

标签： svg safari modal-dialog webkit anchor

【解决方案1】：

Safari 不支持 href，如果你想在那里工作，你需要使用 xlink:href。

xlink:href 是 SVG 1.1，href 是 SVG 2 功能。

【讨论】：

xlink:href 将我的光标变成一只手，以获得可点击的链接。它甚至在左下角显示“转到此页面上的#openRoom4_1”。但是，它仍然没有带我进入我的模式。