增加 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 cmets，“每条边都是使用“路径”制作的，没有 id 并且不使用引用。”在这种情况下：

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

2. 我通过在 d 属性的末尾添加 z 来关闭所有这些路径（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>