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，并且不使用引用。”在这种情况下：

我使用类.graph_edge
我通过在d属性的末尾添加一个z来关闭所有这些路径（OP给我的路径）。
在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>

增加SVG边框的可点击区域

1 个答案: