SVG 中虚线的悬停事件答案

【问题标题】：Hover events for a dashed line in an SVGSVG 中虚线的悬停事件
【发布时间】：2018-07-11 08:05:46
【问题描述】：

带有使用stroke-dasharray 的线（或路径）的 SVG 似乎仅在用户将鼠标悬停在虚线的实线部分上时触发 CSS 和 JS 悬停事件：https://codepen.io/anon/pen/YeXoZy

有没有一种简单的方法可以让 JS 和 CSS 事件在线条的实心或不可见部分悬停时触发？

我目前的计划是沿着相同的路径绘制第二条不可见的线，并用它来检测鼠标事件。 https://codepen.io/anon/pen/BYNgRR 这似乎很重，我希望我缺少一种更清洁的方式。

【问题讨论】：

标签： javascript css svg

【解决方案1】：

这可以通过使用rect而不是line和使用SVG transforms和patterns来解决。

一个例子可以在this CodePen看到。

它基本上可以归结为：

<svg height="210" width="500">
    <defs>
        <pattern id="pattern1"
                width="10" height="10"
                patternUnits="userSpaceOnUse"
                patternTransform="rotate(0 60 60)">
        <line stroke="green" stroke-width="12px" y2="10"/>
        </pattern>
        <pattern id="pattern2"
                width="10" height="10"
                patternUnits="userSpaceOnUse"
                patternTransform="rotate(0 60 60)">
        <line stroke="red" stroke-width="12px" y2="10" stroke="transparent"/>
        </pattern>
    </defs>
    <g transform="rotate(45 60 60)">
        <rect x="0" y="0" width="500" height="5"/>
    </g>
</svg>

还有以下 CSS：

rect {
    fill: url(#pattern1)
}
    rect:hover {
    fill: url(#pattern2)
}

【讨论】：

虽然这解决了 OP 的直线问题，但这不适用于路径、圆、弧等。

【解决方案2】：

如果没有第二条“检测器”行，我不确定如何做到这一点，但如果没有 JS，至少可以采用一种不那么笨拙的方式。

切换线的顺序，然后你可以像往常一样对虚线使用悬停选择器，然后在检测器线的选择器中使用+来更改紧随其后的线的属性：

https://codepen.io/RyanGoree/pen/LQVKBV

【讨论】：

绝对解决了 CSS 事件组件，但我需要触发 CSS 悬停事件（用于样式）和 JS 事件（用于更改页面上其他地方的文本），我不认为我做到了我的问题足够清楚。 js方面有什么想法吗？
啊，好吧，我只检测检测器线的悬停，因为它是完整的。看起来你的笔已经在这样做了。您已经为检测器重复了两次侦听器。