SVG路径点击区域问题：添加不可见矩形仍无法扩大点击范围

你碰到的这个问题，本质是SVG对点击交互区域的判定逻辑在搞鬼：默认情况下，SVG元素只有存在“可见绘制内容”的时候才会响应点击事件。你给矩形设置了fill:none和stroke:none，等于让这个矩形没有任何可被浏览器识别的“点击区域”——哪怕它在DOM里确实存在，浏览器也不会把它当作可点击的目标。

下面给你两个简单可行的修复方案：

方案1：用透明填充替代fill:none #

把矩形的fill:none改成fill:transparent，这样矩形依然完全不可见，但会被浏览器识别为有填充区域，从而成为可点击的目标：

<a xlink:href="index.html" target="_top">
  <rect x="160.42851" y="85.227654" height="400" width="400" style="fill:transparent;stroke:none" id="rect59"/>
  <path id="path3520" d="m..."/>
</a>

方案2：使用pointer-events强制开启点击响应 #

给矩形添加pointer-events: all属性，这个属性会强制浏览器忽略元素的可见性，直接将其整个边界盒作为点击区域：

<a xlink:href="index.html" target="_top">
  <rect x="160.42851" y="85.227654" height="400" width="400" style="fill:none;stroke:none;pointer-events:all" id="rect59"/>
  <path id="path3520" d="m..."/>
</a>

额外小提示 #

如果你的项目只需要兼容现代浏览器，也可以把xlink:href换成SVG2标准的href，写法更简洁，但xlink:href在旧版浏览器（比如IE）里的兼容性更好，可以根据你的需求选择。

内容的提问来源于stack exchange，提问作者Pixie