Question

我有一张地图，我在不同的城市位置放置了一些针脚。这些引脚由<path>标签组成。这些路径标记都包含在<a>标记内。我注意到，当我尝试将鼠标悬停在引脚上时，只有路径的填充部分是可点击的，即使<a>标记在<path>标记周围形成一个正方形。有可能以某种方式使标签的整个方块可点击吗？即使它的内容是一条路径。我尝试了一些显而易见的事情，例如向元素添加显示块，但它没有任何区别。

Codepen在这里： http://codepen.io/anon/pen/ZBPwWp

Answer 1

在您的图钉符号前面或后面放一个透明的矩形。

比较这两个版本的引脚。第二个包括<rect>，如下所示：

<rect ... fill="transparent"/>

＆＃13;

svg {
  width: 100px;
}

.map-pin {
  fill: #CD1A1C;
}

＆＃13;

<svg viewBox="993 67 55 74">
  <a href="http://www.google.com">
    <path id="pin-reykjavik" class="map-pin st3" d="M1019,106c-5.8-1.3-9.5-7-8.3-13c1.2-6,6.7-10,12.4-8.7c4.2,0.9,7.6,4.3,8.3,8.7
          c1.1,6-2.7,11.9-8.3,13C1021.7,106.3,1020.4,106.3,1019,106 M1021.1,67.6c-15,0-27.3,12.4-27.3,27.6c0,6,2,11.7,5.4,16.5l20.6,28.2
          c0.5,0.6,1.5,0.8,2.1,0.3c0.2-0.2,0.2-0.2,0.3-0.3l20.6-28.2c3.5-4.8,5.4-10.5,5.4-16.5C1048.4,80,1036.1,67.6,1021.1,67.6">
    </path>
  </a>
</svg>


<svg viewBox="993 67 55 74">
  <a href="http://www.google.com">
    <rect x="993" y="67" width="55" height="74" fill="transparent"/>
    <path id="pin-reykjavik" class="map-pin st3" d="M1019,106c-5.8-1.3-9.5-7-8.3-13c1.2-6,6.7-10,12.4-8.7c4.2,0.9,7.6,4.3,8.3,8.7
          c1.1,6-2.7,11.9-8.3,13C1021.7,106.3,1020.4,106.3,1019,106 M1021.1,67.6c-15,0-27.3,12.4-27.3,27.6c0,6,2,11.7,5.4,16.5l20.6,28.2
          c0.5,0.6,1.5,0.8,2.1,0.3c0.2-0.2,0.2-0.2,0.3-0.3l20.6-28.2c3.5-4.8,5.4-10.5,5.4-16.5C1048.4,80,1036.1,67.6,1021.1,67.6">
    </path>
  </a>
</svg>

＆＃13;

Answer 2

无论

在对象上设置CSS属性pointer-events: visible;。

或

使用pointer-events: all

取决于你想要发生的事情。

使标记内的未填充部分可单击

2 个答案: