Question

我使用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>

Answer 1

代替

<a href="whatever">

尝试

<a xlink:href="whatever">

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

xlink:前缀的此要求已在SVG 2中删除。但并非所有浏览器都已实现。

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

1 个答案: