getBoundingClientRect из SVG в Internet Explorer 10 и 11

У меня есть карта США с каждым штатом и его аббревиатурой в группе, которая находится внутри тега. Используя php перед загрузкой страницы, ссылки состояния помечаются как активные или неактивные в зависимости от того, есть ли в этом месте расположение регистра. С помощью javascript/jQuery я пытаюсь получить все активные состояния и сравнить их с неактивными состояниями, чтобы выяснить, какие состояния являются граничными состояниями активных состояний, а какие не являются ни активными, ни пограничными состояниями и должны быть скрыты. Как только я нахожу эти состояния, я отбрасываю скрытые состояния и нахожу периметр всех видимых состояний, чтобы создать обтравочный контур, показывающий только активную область карты. Несмотря на то, что мой jsfiddle заставит вас поверить, это прекрасно работает в Chrome, Firefox и Safari. Я просто до ужасного IE 10 и 11 и ничего, что я пытаюсь, не работает. В IE в скрипте столкновения (заимствованном из: https://gist.github.com/miguelmota/7954898) он возвращает 0 для вершины смещения. Вот фрагмент моего кода, который по какой-то причине не получает BoundingClientRect: https://jsfiddle.net/jking86/eseb4Lhs/15/ Вот как он правильно отображается в Chrome: введите описание изображения здесь

Вот как это отображается в IE 11: введите описание изображения здесь

JS:

jQuery(document).ready(function($) {
    $( document ).ready(function() {
      convertSvg();
      if ($(window).width() >= 768) {
        // Get the modal
        var modal = document.getElementById('contactModal');

        // Get the button that opens the modal
        var btn = document.getElementById("getStartedBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        if (modal){
          // When the user clicks the button, open the modal
          btn.onclick = function() {
              modal.style.display = "block";
          }

          // When the user clicks on <span> (x), close the modal
          span.onclick = function() {
              modal.style.display = "none";
          }

          // When the user clicks anywhere outside of the modal, close it
          window.onclick = function(event) {
              if (event.target == modal) {
                  modal.style.display = "none";
              }
          }
        }
      }
      //slide modal instead of popup on phone
      if ($(window).width() < 768) {
         $('#getStartedBtn').click(function() {
           $(this).hide();
          $('#contactModal').slideDown();
        });
      }
      $(".question-container.multi label.checkbox").click(function() {
          $(this).closest('.survey-item').toggleClass('selected');
          var $checkbox = $(this).prev('input[type=checkbox]');
          if ($checkbox.is(':checked')) {
              $checkbox.attr('checked', false);
          } else {
              $checkbox.attr('checked', true);
          }
      });
      $(".question-container label.radio").click(function() {
          $(this).closest('.question-container').find('.selected').removeClass('selected');
          $(this).closest('.survey-item').addClass('selected');
          $(this).closest('.question-container').find('input[type=radio]:checked').attr('checked', false);
          $(this).prev('input[type=radio]').attr('checked', true);
      });

      //create progress bar
      function progressBar() {
        var qCount = $('.question-container').length;
        var qList = $('#progressBar');
        function activeQuestion() {
        for (var i = 0; i < qCount; i++){
          qList.append('<li class="progress-bar-steps" data-item="q' + (i+1) + '"></li>');
            $('.question-container').each(function (i, value){
              var qId = $(this).attr('id');
              if ($(this).hasClass("active")) {
                  $(this).css('opacity','1.0');
                  $('#progressBar').find("[data-item='" + qId + "']").addClass('active').text(i + 1);
                  $('.progress-bar-steps.active').next('.progress-bar-steps').addClass('next').text('Next');
              } else {
                $(this).addClass('disabled');
              }
            });
        }
      } activeQuestion();
        var qStep = $('.progress-bar-steps');
        $(qStep).width((100 / qCount) + '%');
        $(qList).css('max-width', ( $('form#assessmentTool').width() ));
      }
      progressBar();
        var next = $('#progressBar').find('li.next')[ 0 ];
        $(next).click(function() {
          $('.next').removeClass('next').next().addClass('next');
          $('html,body').animate({ scrollTop:$('.question-container.active').next().offset().top}, 'slow');
          $('.progress-bar-steps.active').removeClass('active').addClass('answered');
          $('.question-container.active').removeClass('active').addClass('disabled').css('opacity', '.3').next().addClass('active').removeClass('disabled');
          $('.question-container').each(function (i, value){
            var qId = $(this).attr('id');
            if ($(this).hasClass('active')) {
                $(this).css('opacity','1.0');
                $('#progressBar').find("[data-item='" + qId + "']").addClass('active').text(i + 1);
                $('.progress-bar-steps.active').next('.progress-bar-steps').addClass('next').text('Next');
            } else {
              $(this).addClass('disabled');
            }
          });
          var next = $('#progressBar').find('li.next')[ 0 ];
        });
  });
});

window.onload = function () {
  convertSvg();
}

function convertSvg(){
    jQuery('img.svg').each(function(){
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');

        jQuery.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }

            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');

            // Check if the viewport is set, else we gonna set it if we can.
            if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
                $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
            }

            // Replace image with new SVG
            $img.replaceWith($svg);

        }, 'xml');

    });
}

(jQuery);

0 ответов

Другие вопросы по тегам