在SVG中悬停虚线的事件

Question

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

是否有一种简单的方法可以在线路的实体或不可见部分悬停时触发JS和CSS事件？

我目前的计划是在同一路径后绘制第二条不可见线，并用它来检测鼠标事件。 https://codepen.io/anon/pen/BYNgRR这似乎很苛刻，我希望我能找到更清洁的方式。

Answer 1

我不确定如果没有第二个＆＃34;检测器＆＃34;如果没有JS，那么至少可以采用不那么重的方式。

切换线的顺序，然后像往常一样使用悬停选择器作为虚线，然后在检测器线的选择器中使用+来更改紧随其后的线的属性：< / p>

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

Answer 2

使用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)
}