Wie Sie unten auf gif sehen können, :hover Zustand nicht richtig funktioniert, wenn ich den Mauszeiger von unten Polygon oberen Polygon bewegen:SVG - Polygon Hover funktioniert nicht ordnungsgemässen
Getestet in Chrome und Firefox - Ergebnis ist das gleiche.
Wie kann ich SVG Polygon drehen :hover Zustand rechts, nachdem der Mauszeiger die Grenzen eingibt?
Es gibt keine fill, um das Zeigerereignis abzufangen, damit es fehlschlägt.
Eine einfache transparente Füllung korrigiert es.
polygon {
stroke-width: 1;
stroke: red;
fill: transparent;
}
polygon:hover {
fill: red;
}<svg viewBox="0 0 999 799">
<polygon points="445,161 345,174 500,10" />
<polygon points="445,161 345,174 500,270" />
</svg>Wie von Robert Longson erwähnt
pointer-events: visible ist die und performant Lösung bevorzugt.
polygon {
stroke-width: 1;
stroke: red;
fill: none;
pointer-events: visible;
}
polygon:hover {
fill: red;
}<svg viewBox="0 0 999 799">
<polygon points="445,161 345,174 500,10" />
<polygon points="445,161 345,174 500,270" />
</svg>Verwenden Sie nicht fill: transparent, verwenden Sie Zeiger-Ereignisse: sichtbar –
@RobertLongson da es funktioniert wie erwartet in meinem Fall, ich denke, das ist die richtige Antwort auf meine Frage. –
@limonte Es ist ** eine ** Antwort, aber es ist nicht die ** beste ** Antwort, weil es nicht Standard ist und schlechtere Leistungsmerkmale als Zeiger-Ereignisse –
Ich erinnere mich, irgendwo früher gelesen, dass 'Füllung: none' Zeiger Ereignisse beeinflusst und dass es besser war,' Füllung zu verwenden: transparent.' Versuchen und zu sehen, ob das hilft. Es scheint für mich [hier] zu funktionieren (https://jsfiddle.net/36Lcyvyw/1/), aber ich kann das nicht als Antwort posten, da ich keine solide Erklärung habe. – Harry
Verwenden Sie nicht füllen: transparent, verwenden Sie Zeiger-Ereignisse: sichtbar –
@Harry wow, ich habe keine Ahnung warum, aber Ihr Vorschlag funktioniert wie ein Charme! Wenn du es in eine Antwort einfügen kannst, akzeptiere ich es :) –