Нет всплывающих окон в Safari. Использование интерактивного SVG - PullRequest
Новая
       24

Нет всплывающих окон в Safari. Использование интерактивного SVG

0 голосов
/ 22 марта 2019

Я создал интерактивный рабочий процесс с использованием 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>

1 Ответ

1 голос
/ 22 марта 2019

вместо 

<a href="whatever">

попробовать 

<a xlink:href="whatever">

SVG <a> элементы не совпадают с элементами HTML <a>. В версии SVG вы ссылаетесь, используя xlink:href.

Это требование для префикса xlink: было исключено в SVG 2. Но не все браузеры это реализовали.

...