Как увеличить область наведения пути svg

Question

Что у меня:

#poly-1:hover {
    stroke: green;
}

<svg width="1000" height="500" id="chart-main-canvas" style="background-color: bisque; z-index:5000;"> 
    <path id="poly-1" d="M 5,10 C 24,88 60.99999999999998,322 100,400 C 139,478 149,470 200,400 C 251,330 295,30.000000000000007 355,50 C 415,70 470.99999999999994,410 500,500" fill="none" stroke="red" style="z-index:6000;"></path>
</svg>

Если я наведу курсор точно на path, что является сложной задачей, линия изменит цвет на зеленый.

Что я хочу сделать , так это увеличить область наведения этого пути, чтобы я мог переместить курсор куда-нибудь +-5px рядом с областью path, и он все равно будет менять цвет.

Единственные два способы, которые я знаю, что я могу сделать:

1. Сделать stroke-width больше, но я не хочу, чтобы его фактический размер с красным цветом увеличивался.
2. С моим основным путем создать невидимый дублировать путь, который имеет больший stroke-width, и добавить условие, что если я наведу на него курсор, мой основной путь изменит цвет.

Но есть какой-нибудь простой способ сделать это?

Answer 1

Этот ответ - практически ваш второй вариант.

Я помещаю путь #poly-1 в определения и использую его первым с широкой шириной обводки и без обводки. Чтобы сделать его чувствительным к мыши, я использую pointer-events="stroke"

<use xlink:href="#poly-1" stroke-width="10" pointer-events="stroke"/>

Далее идет еще одно использование - видимое - с красной обводкой.

Я кладу оба использовать элементы в группе. Обводка второго использованного элемента меняется, когда я наведен на группу.

#group .use{
stroke:red
} 
#group:hover .use{
stroke: green; 
}

<svg width="1000" height="500" id="chart-main-canvas" style="background-color: bisque; z-index:5000;">
<defs>
<path id="poly-1" d="M 5,10 C 24,88 61,322 100,400 C 139,478 149,470 200,400 C 251,330 295,30 355,50 C 415,70 471,410 500,500" fill="none" ></path>
</defs>
<g id="group">
<use xlink:href="#poly-1" stroke-width="10" pointer-events="stroke"/>
<use class="use" xlink:href="#poly-1" />
</g>
</svg>

Answer 2

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

#poly-1:hover {
    stroke: green !important;
    stroke-width:2px;
}

<svg width="1000" height="500" id="chart-main-canvas" style="background-color: bisque; z-index:5000;"> 
    <path id="poly-1" d="M 5,10 C 24,88 60.99999999999998,322 100,400 C 139,478 149,470 200,400 C 251,330 295,30.000000000000007 355,50 C 415,70 470.99999999999994,410 500,500" fill="none" stroke="red" style="z-index:6000;"></path>
</svg>