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

任何建议都可以理解，因为我希望它尽可能地容易获得。

*编辑

Internet Explorer 10和11是我希望使用的版本

Answer 1

这在IE中为我工作：我删除了异物，而是使用了text元素。 .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>

希望对您有帮助。

如何使Internet Explorer理解我的SVG CSS

1 个答案: