ForeignObject for IE10?

Question

JavaScript

Good day!
On the site, when hovering over g using css , I fill the polygon and show the div . See here
In chrome, everything is fine, but IE10 does not support foreignObject and the construction does not work.

Tried Jquery:

$("polygon").hover(
  function () {
    var goffs = $(this).offset();
    $('body').append(txt1);
    $('#txt1').css({'left' : goffs.left, 'top' : goffs.top-100});
    },
  function () {
    $("#txt1").remove();
   }
);

but accordingly, if the hover is lost from the polygon txt, it is deleted and there is no way to click on the link.

The SVG structure is like this:

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

Maybe there is some solution for implementation on IE10?

Answer 1

Some shit code (not minified, ie9+)
musjice.bl.ee/svgmap