html - 我怎样才能让 Internet Explorer 理解我的 SVG css

Question

我正在通过 html 和 css 生成 map ，但是当涉及到 Internet Explorer 时我似乎遇到了问题，因为 map 根本没有显示，我只是得到一个空白页面。

以下代码是我的 map 的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;  
}

感谢任何建议，因为我希望它尽可能易于访问。

*编辑

Internet Explorer 10 和 11 是我希望在其中运行的版本

Answer 1

这在 IE 中对我有用:我已经移除了异物，而是使用了文本元素。 .htext 类具有填充而不是颜色。

我删除了 SVG 元素的 width="65%"height="auto" 属性，并在 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>

希望对你有帮助。