SVG路径在IE10 +中没有大小，不显示标签位置

我有一个SVG图像映射，其中包含各种路径包裹在锚点中。这些提供Bootstrap弹出功能。在Chrome，IE9和其他浏览器中，这些链接具有适当的大小并且可以键盘导航。在IE10和11中，它们是可以放置的，但由于路径和锚点的尺寸为0，因此不会显示制表位的可视指示。SVG路径在IE10 +中没有大小，不显示标签位置

如何让它们在IE10 +中具有大小？

查看地图here的演示。

<figure class="svg-wrapper"> 
    <svg class="img-responsive svg-content" id="map" version="1.1" viewBox="0 0 911 656" preserveAspectRatio="xMinYMin meet"> 
     <image style="overflow:visible;" width="911" height="656" xlink:href="static/highed/HE-CampusMap-v5-text.png" /> 

     <a class="pop-top" data-value="faculty" data-dept-name="Instructional Technology" href="#"> 
      <path d="M505.5,96.2l-1,108l-43-0.4c0,0-19.5-32.3-66.5-31.2c-55.6,1.3-63,29.9-63,29.9l-45.5-0.4l1-108L505.5,96.2z" /> 
     </a> 
     ...

来源

2014-05-12 isherwood

您可以使用您的定位点/路径的边界来显示焦点。添加以下到你的CSS：

a:focus { 
    stroke-width:3; 
    stroke:rgb(0,0,0); 
    outline:none; 
}

演示：http://jsfiddle.net/Asg3c/4/

来源

2014-05-16 16:19:49

Cripes。我发誓我已经尝试过了。谢谢。 – isherwood

请注意，它似乎在Firefox中不起作用，但我不确定它是否支持SVG中的可聚焦元素 –

SVG路径在IE10 +中没有大小，不显示标签位置

回答

相关问题