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);