时间戳

首页 > 解决方案 > Safari 上没有弹出窗口。使用交互式 SVG

debugging - Safari 上没有弹出窗口。使用交互式 SVG

问题描述

我使用 SVG 制作了一个交互式工作流。这个是用 Adob​​e 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>

标签： debuggingsvgsafaripopup

解决方案

代替

<a href="whatever">

尝试

<a xlink:href="whatever">

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

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

推荐阅读