How can i make Internet Explorer understand my SVG css - html

Question

Im in the process of generating a map through html and css, however i seem to have an issue when it comes to Internet Explorer as the map is not shown at all i just get a blank page.
the following code is the html part of my map.
<div class="svg">
<svg class="box" width="65%" height="auto" viewbox="0 0 800 800"
xmlns="http://www.w3.org/2000/svg">
<a href="https://www.google.dk"><polygon class="haderslev"
points="519,5, 538,46, 556,65, 576,61, 591,39, 609,43, 615,60, 622,73,
635,77, 661,70, 730,32, 744,49, 741,69, 731,90, 742,104, 781,128, 787,142,
784,154, 772,179, 769,197, 750,207, 683,212, 667,236, 660,276, 658,281,
626,270, 607,254, 563,247, 520,233, 513,244, 509,265, 371,364, 352,252,
456,227, 437,218, 426,221, 409,242, 389,238, 384,229, 391,216, 400,201,
393,185, 373,170, 349,169, 318,182, 315,197, 302,202, 297,196, 294,171,
290,157, 295,124, 279,99, 265,60, 271,56, 296,63, 311,69, 316,58, 319,49,
351,52, 381,70, 398,50, 406,60, 409,94, 433,98, 451,89, 448,65, 452,50,
463,46, 479,42, 488,12, 507,2" />
<foreignobject x="490" y="125" width="140px" height="30px"
class="haderslevnode">
<div class="htext">Haderslev</div>
</foreignobject></a>
</svg>
</div>
And this is the css to make it work. which functions perfectly on Chrome and Firefox respectively.
.svg{
height: 100vmin;
}
.haderslev{
fill:#7c7c7c;
}
.haderslev:hover{
fill:#eab616;
}
.htext{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif,MagistralBold;
font-weight:bold;
font-size:24px;
color:#ffffff;
}
any advice is apreciated as i would like this to be as accessible as posible.
*Edit
Internet explorer 10 and 11 are the versions i would like this to funktion in

Answer 1

This is working for me in IE:
I've removed the foreign object and I'm using a text element instead. The class .htext has a fill instead of a color.
I've removed width="65%" height="auto" attributes of the SVG element and I've added this in css:
.svg{
height: 100vmin;
width: 100vmin;
}
svg{border:1px black}
.svg{
height: 100vmin;
width: 100vmin;
border:1px solid;
}
.haderslev{
fill:#7c7c7c;
}
.haderslev:hover{
fill:#eab616;
}
.htext{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif,MagistralBold;
font-weight:bold;
font-size:30px;
fill:#ffffff;
}
<div class="svg">
<svg class="box" viewbox="0 0 800 800"
xmlns="http://www.w3.org/2000/svg">
<a href="https://www.google.dk"><polygon class="haderslev"
points="519,5, 538,46, 556,65, 576,61, 591,39, 609,43, 615,60, 622,73,
635,77, 661,70, 730,32, 744,49, 741,69, 731,90, 742,104, 781,128, 787,142,
784,154, 772,179, 769,197, 750,207, 683,212, 667,236, 660,276, 658,281,
626,270, 607,254, 563,247, 520,233, 513,244, 509,265, 371,364, 352,252,
456,227, 437,218, 426,221, 409,242, 389,238, 384,229, 391,216, 400,201,
393,185, 373,170, 349,169, 318,182, 315,197, 302,202, 297,196, 294,171,
290,157, 295,124, 279,99, 265,60, 271,56, 296,63, 311,69, 316,58, 319,49,
351,52, 381,70, 398,50, 406,60, 409,94, 433,98, 451,89, 448,65, 452,50,
463,46, 479,42, 488,12, 507,2" />
<text class="htext" x="490" y="150">Haderslev</text>
</a>
</svg>
</div>
I hope it helps.