Как я могу заставить Internet Explorer понимать мой SVG CSS

Question

Я нахожусь в процессе создания карты с помощью html и css, однако у меня возникает проблема с Internet Explorer, так как карта вообще не отображается, я просто получаю пустую страницу.

следующий код является HTML-частью моей карты.

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

И это CSS, чтобы заставить его работать. который отлично работает на Chrome и Firefox соответственно.

.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;  
}

Любой совет ценится, поскольку я хотел бы, чтобы он был максимально доступным.

* Edit

Internet Explorer 10 и 11 - это версии, которые я хотел бы использовать в

Answer 1

Это работает для меня в IE: Я удалил посторонний объект и вместо этого использую текстовый элемент. Класс .htext имеет заливку вместо цвета.

Я удалил width="65%" height="auto" атрибуты элемента SVG и добавил это в 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>

Надеюсь, это поможет.