Question

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

如何让他们在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>
        ...

Answer 1

您可以使用锚点/路径的边框来显示焦点。在CSS中添加以下内容：

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

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

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

1 个答案: