SVG路径接近检测

我有一组SVG路径，并且当鼠标在路径的某个临近点时发送点击事件。我不希望路径周围的矩形框的接近。这可能吗？SVG路径接近检测

2013-02-13 Lasse

您可以添加不同（展开）形状的点击区域，或者只需复制路径并添加一个较大的描边。假设一个标记，如...

<svg xmlns="http://www.w3.org/2000/svg"> 
    <path d="m169,83c75,-44 220,145 96,110c-124,-35 -171,-66 -96,-110z" class="hitarea" /> 
    <path d="m169,83c75,-44 220,145 96,110c-124,-35 -171,-66 -96,-110z" /> 
</svg>

那么你可以做......

path { 
    fill: black; 
    stroke: green; 
    stroke-width: 5; 
    pointer-events: none; 
} 

path.hitarea { 
    opacity: 0; 
    stroke-width: 50; 
    pointer-events: auto; 
} 

path.hitarea:hover + path { 
    fill: red; 
}

或者，如果你不需要在形状中风，那么你可以简单地把一个大的透明中风，它会工作。

http://jsfiddle.net/MbsCh/

来源

2013-02-13 20:29:55 Duopixel

我会建议更换'指针的事件：汽车;'和'指针事件：绘;'，'因为是auto'没有任何规范呢。 – 2013-02-14 09:18:56

一个不错的，干净的例子。但是，我正在处理一组动态加载的SVG对象，并且它们都使用描边宽度绘制形状。是否没有可能性追加这个对象本身的邻近命中？在此设置中保留SVG对象的副本将会是一个挑战。 – Lasse 2013-02-14 17:25:13

您可以在鼠标悬停时创建重复项，并在鼠标移出时将其移除。 – cuixiping 2016-01-20 06:13:46

SVG路径接近检测

回答

相关问题