Ich habe ein SVG, das verwendet: Hover, um die Farbe zu ändern. Es funktioniert nur, wenn ich über den festen Teil des SVG schwebe, nicht den transparenten Teil. Ich frage mich, wie Sie die SVG mit der Maus interagieren lassen können, die irgendwo über dem ganzen SVG schwebt. Der Sinn davon ist, den SVG zu einem Link zu machen und den Link nur an bestimmten Teilen des SVG anklickbar zu machen. Ich möchte nicht nur eine Lösung für diese bestimmte Instanz, sondern eine Lösung, die für viele Instanzen funktioniert (Wenn ich verschiedene Teile der SVG anklickbar wollte.) Die Elemente in meiner SVG sind direkt mit CSS verbunden und gruppiert mit einem & lt; g & gt; Tag zum Gruppieren der anklickbaren Elemente.
Bearbeiten: Das SVG befindet sich in einem Objekt-Tag
SVG2 fügt ein neues Schlüsselwort bounding-box zu "pointer-events" hinzu, um dies zu vereinfachen. Es gilt sowohl für Gruppen als auch für Formen, in Ihrem Beispiel würde es werden:
Siehe jsfiddle . Im Moment sollte das in Chrome Canary oder Opera Dev Builds funktionieren.
Das hängt von den Formen ab, aber es ist auch möglich, dass es in den Browsern funktioniert, die momentan ausgeliefert werden. B. indem Sie pointer-events="all" für die größte Form verwenden und dann CSS-Selektoren kreativ verwenden, um den gewünschten Strich zu erhalten. Es ist ein bisschen schwierig, da Sie wahrscheinlich möchten, dass der Strich auf die Gruppe angewendet wird, obwohl das tatsächlich überlagerte Element die Form innerhalb der Gruppe ist.
Eine andere Alternative besteht darin, sie mit den Ereignissen mouseenter und mouseleave auf dem & lt; g & gt; Element.
Sie können pointer-events="visible" in den Test <g> und einen Funktionsaufruf, bei dem die Funktion im übergeordneten HTML-Code enthalten ist (Dies wurde in IE / CH / FF getestet), z. B.
BEARBEITEN - Hinzugefügt.
Ich habe getestet, dass du deinen Svg als Quelle für einen <img> und nicht für einen <object> benutzt hast und platziere ihn in einem Link. Das funktioniert, ist in allen Browsern anklickbar. Der Aufruf von pointer-events oder functiont muss nicht hinzugefügt werden. Daher könnten Sie img lieber als Objekt verwenden.
Wenn Sie am Ende ein gültiges HTML-Dokument haben wollen. Umgeben Sie das Svg-Element mit einem Anker-Tag, wenn Sie es in einen Link verwandeln möchten.
Vergessen Sie auch nicht, den Link in ein Block- oder Inline-Block-Element umzuwandeln. (Dies hängt von Ihren Bedürfnissen ab)
Es gibt einen Hack, den Sie mit einem Filter machen können. Filtereffekte können Füllungen in Transparenz ändern, ohne ihre Klickbarkeit zu ändern. Unten fügen Sie Ihrer Grafik eine halbtransparente Füllung hinzu, verwenden dann aber einen Filter, um sie zu entfernen.
%Vor% Bearbeiten:
svg:hover .test {
stroke: #555555}
Ignoriere die vorherige Antwort (unten), sie adressierte ein anderes Problem.
Erstelle ein leeres transparentes Objekt - zB <rect> , das ist die Größe und Form von <svg> und platziere es direkt vor dem </a></svg> (nicht umhüllen!).
Tags und Links html css svg transparency clickable