增加 SVG 边框的可点击区域

Question

我有使用描边且无填充的边缘制成的 SVG 形状。

有没有办法增加 SVG 边框的可点击区域？

如果它只是一个形状，我可以添加一个带有描边宽度的边框以使可点击区域更大。但是，我已经在使用边框了。

在下面添加第二个更大的图层（同一“g”中的第二个“路径”但透明）也不起作用，因为存在一个选择机制，如果我们单击第二层而不是可见层，该选择机制就会中断，如下所示以及元素被重新绘制的事实（它们是图表中框之间的链接，当我实时移动框时它们会更新），并且执行此操作的代码被密封在 API 中。然而，如果这两层在某种程度上可以像只有一层一样工作，那就行了。

编辑：这是其中一种形状的示例。

<g>
    <path class="graph_edge" d="M239.25 -185.8L290.125 
        -185.8L290.125 -281L341 -281">
    </path>
</g>

就目前情况而言，如果可能的话，我宁愿不添加 id，也不能更改现有路径的任何内容。

Answer 1

如果不使用填充，则只有笔划可单击。您可以使用透明填充来使形状内部可点击。但是：如果您只希望笔划可单击，则可以使用<use>更宽的透明笔划重复使用您的形状，将它们放在一个组中并使该组可单击

#clickable:hover{cursor:pointer}

<svg width="250" height="150" viewBox="0 0 250 150">
 <defs> 
  <rect id="therect" x="20" y="20" height="80" width="100" >
  </rect>
  </defs>
  
<g  id="clickable">

<use xlink:href="#therect" stroke="#006600" stroke-width="5" fill="none" fill-opacity="0.5" />

<use xlink:href="#therect" stroke="#000" stroke-width="25" fill="none"  stroke-opacity="0" />

</g>
</svg>

更新OP评论“每条边都是使用“路径”制作的，没有ID并且不使用引用。” 在这种情况下：

1. 我用类创建所有路径的数组.graph_edge

2. 我通过在 d 属性的末尾添加 az 来使用 javascript 关闭所有这些路径（OP 给我的路径）。

3. 在 CSS 中，我为形状添加了透明边框。这会增加形状的可点击区域，但不可见。

PS非常奇怪的边缘形状！

let pathsArray = Array.from(
document.querySelectorAll(".graph_edge"))


pathsArray.forEach(p =>{  
  let thisD = p.getAttributeNS(null,"d");
  p.setAttributeNS(null, "d", thisD+"z")
})

svg{border:1px solid;}

.graph_edge{stroke:rgba(0,0,0,0); stroke-width:15px; cursor:pointer;}

<svg viewBox = "230 -290 120 120"><g>
    <path id="test" class="graph_edge" d="M239.25 -185.8L290.125 
        -185.8L290.125 -281L341 -281">
    </path>
</g>
</svg>