Увеличение интерактивной области границы SVG

Question

У меня есть формы SVG, сделанные из краев с использованием обводки и без заливки.

Есть ли способ увеличить кликабельную область границы SVG?

Если бы это была просто форма, я мог быпросто добавьте границу с шириной обводки, чтобы увеличить кликабельную область.Тем не менее, я уже использую границы.

Добавление второго и большего слоя снизу (второй «путь» в том же «g», но прозрачном) также не будет работать, так как на месте есть механизм выбора, который быперерыв, если мы щелкнули второй слой вместо видимого, а также тот факт, что элементы перерисовываются (они представляют собой ссылки между полями на графике и обновляются по мере их перемещения в реальном времени), икод, который делает это, запечатан в API.Однако, если два слоя могут работать так, как если бы был только один путь, это сработало бы.

РЕДАКТИРОВАТЬ: Вот образец одной из фигур.

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

Как этостоит, я бы не стал добавлять идентификатор, если это возможно, и я не могу ничего изменить в существующем пути.

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>

ОБНОВЛЕНИЕ ОП комментирует, что «каждое ребро создано с использованием« пути », не имеет идентификатора и не использует ссылки».В этом случае:

1. Я создаю массив всех путей с классом .graph_edge

2. Я закрываю все эти пути (путь, который ОП далme) с помощью javascript, добавив az в конец атрибута d.

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>