如何使 svg 路径悬停区域更大 [英] How do I make svg path hover area bigger
问题描述
我有什么:
#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
上(这是一项棘手的任务),它会将颜色更改为绿色.
If I hover exactly on path
, which is a tricky task, line it will change color to green.
我想要做的是让这条路径的悬停区域更大,这样我就可以将光标移动到path
附近的+-5px
代码>区域,它仍然会改变颜色.
What I want to do is to make hover area of this path bigger, so I could move my cursor somewhere +-5px
near the path
area and it will still change color.
我知道我能做的唯一两种方法是:
The only two ways I know I could do is:
- 使
stroke-width
变大,但我不希望红色的实际大小增加. - 使用我的主路径创建具有更大
stroke-width
的不可见重复路径,并添加条件,如果我将鼠标悬停在其上 - 我的主路径将改变颜色.
- Make
stroke-width
bigger, but I don't want its actual size with red color to increade. - With my main path create invisible duplicating path that has bigger
stroke-width
and add condition that if I hover on it - my main path will change color.
但是有什么简单的方法可以做到吗?
But there is any simple way to do it?
推荐答案
这个答案实际上是您的第二个选择.
This answer is practically your second option.
我将路径 #poly-1
放在 defs 中,并首先使用它的笔画宽度较宽且没有笔画.为了使其对鼠标敏感,我使用 pointer-events="stroke"
I'm putting the path #poly-1
in the defs and use it first with a wide stroke-width and no stroke. In order to make it sensitive to the mouse I'm using pointer-events="stroke"
<use xlink:href="#poly-1" stroke-width="10" pointer-events="stroke"/>
接下来是另一种用途 - 可见的 - 带有红色笔划.
Next comes another use - the visible one - with a red stroke.
我将两个 use 元素放在一个组中.当我将鼠标悬停在组上时,第二个使用元素的笔画会发生变化.
I'm putting both use elements in a group. The stroke of the second use element changes when I'm mousing over the group.
#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>
这篇关于如何使 svg 路径悬停区域更大的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!