Safari 上没有弹出窗口。使用交互式 SVG答案

【问题标题】：No pop-up showing up on Safari. Using interactive SVGSafari 上没有弹出窗口。使用交互式 SVG
【发布时间】：2019-08-13 08:42:08
【问题描述】：

我使用 SVG 制作了一个交互式工作流程。使用 Adobe XD 制作，并将其转换为工作流程，其中每个按钮都会打开一个弹出模式并显示视频（如灯箱）。

我遇到的问题是按钮无法使用 Safari。使用 Google Chrome 或 Firefox 确实有效。我该怎么做才能让 Safari 也能做到这一点？

您可以通过 Fiddle 查看交互式工作流程的示例。

要重现问题，您应该在 Safari 中打开该链接。如果你想看看它应该如何工作，你应该使用 Chrome 或 Firefox

-- 编辑 25-03-19--

感谢您的帮助，但答案无效。 Xlink:herf 有点旧，不适用于 Safari。也许它适用于常规链接，但我无法让我的模式弹出窗口工作。

我在http://jsbin.com/lajilacajumu/1/edit?html,css,output 找到了我遇到的问题的一个工作示例

还用我在示例中看到的信息进行了预览。

.hoverable-rect {
  cursor:pointer
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap Bug Report</title>

<!-- Bootstrap's CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.css" rel="stylesheet">
  </head>
<body>
    
<!-- the different buttons comes here -->
    <div class="container">
<svg viewBox="0 0 1920 1080">
<g class="hoverable-rect" data-toggle="modal"  data-target="#modal1" id="g3223" id="prime-ppd" transform="translate(175.776 781.062)">
      <g id="prime-elements">
        <rect id="prime-bg" width="50" height="50" x="0" y="0" fill="#0094db"/>
        <text id="PRIME" transform="translate(4.65 26.098)" fill="#fff" font-size="11" font-family="HelveticaNeue-Medium, Helvetica Neue" font-weight="500" letter-spacing="-0.002em"><tspan x="0" y="0">PRIME</tspan></text>
      </g>
    </g>

</svg>

<!-- all different modals comes here -->
<div class="modal fade overlay" id="modal1" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <iframe src="https://player.vimeo.com/video/303329059?autoplay=1&loop=1&autopause=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>
</div>
</body>

<!-- jQuery and Bootstrap's JavaScript-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.js"></script>

</html>

【问题讨论】：

请创建一个minimal reproducible example - 一个演示问题的简化示例。不鼓励链接到您的真实网站，因为最终您可能会修复该页面，然后这个问题和答案可能对未来的读者毫无用处。
感谢保罗的提示。我将该网站复制到 Fiddle 帐户。你可以在jsfiddle.net/LeMans/szo5hqyp/14 看到工作示例。它仍然适用于 Firefox 和 Google Chrome，但在使用 Safari 时，我将无法单击任何按钮。因此，要重现该问题，您可能应该为此使用 Safari。
更新链接小提琴：jsfiddle.net/LeMans/szo5hqyp/16
我们只需要一个按钮。不是整个法师。这就是我们所说的“最小”:)
我也明白了！使用有效的小提琴链接在上面进行了编辑。

标签： debugging svg safari popup

【解决方案1】：

代替

<a href="whatever">

试试

<a xlink:href="whatever">

SVG <a> 元素与 HTML <a> 元素不同。在 SVG 版本中，您使用 xlink:href 链接。

对于 xlink: 前缀的这一要求已在 SVG 2 中删除。但并非所有浏览器都实现了这一点。

【讨论】：

我已经阅读了关于 CSS 技巧的文章。我之前尝试过，但它似乎也不适用于 safari。对于谷歌浏览器和火狐浏览器打开模式没有问题
成功了，请查看我编辑后的代码