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某个地方，它仍然会改变颜色。

我知道我唯一可以做的两种方法是：

增大stroke-width，但我不希望其红色的实际大小增加。
使用我的主路径创建具有更大stroke-width的不可见复制路径，并添加条件，即如果我将鼠标悬停在其上，我的主路径将更改颜色。

但是有什么简单的方法吗？

Answer 1

这个答案实际上是您的第二选择。

我将路径#poly-1放在defs中，并且首先以较宽的笔划宽度且没有笔划使用它。为了使其对鼠标敏感，我正在使用pointer-events="stroke"

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

接下来是另一种用途-可见的用途-带有红色笔触。

我将两个use元素放在一个组中。当我将鼠标悬停在组上时，第二个use元素的笔触发生变化。

#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>

如何使SVG路径悬停区域更大

2 个答案: