Как я могу вызвать события для элементов переполнения в Svg.(Safari ios) - PullRequest
Новая
       12

Как я могу вызвать события для элементов переполнения в Svg.(Safari ios)

0 голосов
/ 03 июня 2018

Кажется, что Safari на ios не вызывает события для элементов переполнения в Svg.Мне нужно, чтобы элемент SVG был кликабельным, даже если они переполнены.Пожалуйста, проверьте ссылку ниже.Прямоугольник справа также должен быть кликабельным.Работает как положено во всех мобильных браузерах, кроме сафари.Есть ли обходной путь для решения этой проблемы?Я не могу изменить ширину, высоту и viewBox элемента svg, потому что содержимое svg будет создаваться динамически.

html: 

<div style="overflow:visible;width:100%;height:100vh;">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50%" height="100%" viewBox="0 0 2000 1000" style="overflow:visible;" preserveAspectRatio="none" xml:space="preserve">
      <g id= "xxx">
        <rect id="rec" x="200" y="0" style="overflow:visible;fill:#d4120c;" width="3600" height="1000"/>
    <rect  x="2000" y="0" style="overflow:visible;fill:#ffffff;" width="10" height="1000"/>
      </g>      
   </svg>
</div>

Javasript: 

var i = true;
$(document).ready(function() {
  $("#xxx").click(function() {
    if (i) {
      $("#rec").css("fill", "#000000");
      i = false;
    } else {
      $("#rec").css("fill", "#d4120c");
      i = true;
    }
  });
});

https://codepen.io/anon/pen/aKddQJ

...