我使用SVG制作了一个交互式工作流程。用Adobe XD制作并将其转换为工作流程，每个按钮打开弹出模式并显示视频（如灯箱）。
我遇到的问题是按钮不能使用Safari。使用谷歌浏览器或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">×</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>代替
<a href="whatever">
尝试
<a xlink:href="whatever">
SVG <a>元素与HTML <a>元素不同。在SVG版本中，您使用xlink:href进行链接。
xlink:前缀的这一要求已在SVG 2中删除。但并非所有浏览器都已实现。