Доброго дня!
На сайте при наведении на
g с помощью css заливаю
polygon и показываю
div. Смотреть
тут
В chrome все отлично, но вот IE10 не поддерживает
foreignObject и конструкция не работает.
Пробовал Jquery:
$("polygon").hover(
function () {
var goffs = $(this).offset();
$('body').append(txt1);
$('#txt1').css({'left' : goffs.left, 'top' : goffs.top-100});
},
function () {
$("#txt1").remove();
}
);
но соответственно при потере hover с polygon txt удаляется и нажать на ссылку нет возможности.
Структура SVG вот такая:
<g id="svgg21">
<polygon id="21ochered" points="96.7,753.3 120.3,761.3 216,747.7 290,978.3 184,1020.3 "></polygon>
<foreignObject x="96" y="700" width="400" height="400" >
<div>
<h4 style="text-align: center; margin-bottom: 20px;">Въездная группа</h3>
<span style="text-align: center; font-weight: bold; display: inline-block; margin-bottom: 20px;">Ввод в эксплуатацию намечен на II квартал 2017 года</span>
<a href="#">Подробнее</a>
</div>
</foreignObject>
</g>
Может есть какое-то решение для реализации на IE10?