wake-up-neo.net

Cursor: Zeiger; auf svg-element funktioniert nicht

In meiner Website verwende ich SVG-Elemente. Manchmal brauche ich sie anklickbar, deshalb möchte ich mit dem Mauszeiger darüber.

Hinzufügen von CSS-Klasse oder Stil

cursor: pointer;

nicht arbeiten.

Das ist das Beispielelement

<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" style="left: 87px; bottom: 56px;" es-character="male2"></object>

Es scheint so, als würde es mit svg nicht funktionieren. Weiß jemand, wie man etwas repariert oder wie man es umgehen kann?

15
Skotnik

Wie AmeliaBRs Kommentar angibt, sollten Sie diesen Stil in SVG <object> einfügen.

Wenn Ihre SVG-Datei nicht sehr einfach ist, haben Sie möglicherweise dasselbe Problem wie ich: Nur wenn Sie sich über einer der Formen in der SVG-Ansicht befinden, wird ein Zeiger angezeigt. 

(In einigen Fällen möchten Sie vielleicht dieses Verhalten, aber für ein Wort beispielsweise möchten Sie normalerweise, dass das gesamte Rechteck anklickbar ist, nicht nur die einzelnen Buchstaben.)

Um das gesamte Rechteck anklickbar zu machen, fügen Sie svg { cursor: pointer; } hinzu. Wenn Sie nur bestimmte Elemente anklickbar lassen möchten, benennen Sie sie nach Klasse:

<svg ...>
  <style>
    svg { cursor: pointer; } /* whole rectangle */

    /* OR */

    .element-name { cursor: pointer; } /* specific elements */
  </style>
  ...
</svg>
17
Zach

Wenn das Hinzufügen von "cursor: pointer" direkt zum Element svg nicht funktioniert, können Sie entweder versuchen, ein transparentes Element hinzuzufügen (Pseudoelemente direkt am Tag object funktionieren nicht) mit den gleichen Abmessungen wie der SVG, der absolut über dem SVG positioniert ist. 

a.svg-cursor:before {
content: "";
display: block;
position: absolute;
background-color: transparent;
cursor: pointer;
/* plus width and height of the SVG */
}
<a href="#" class="svg-cursor">
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" es-character="male2"></object>
</a>

Oder Sie können eine img anstelle von object nehmen und den "cursor: pointer" - Stil zum img hinzufügen:

<img id="male2" src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" alt="Description" />

3

Ich denke, das ist die einfachste Lösung unter den anderen:

1) svg in <a> umschließen, um es anklickbar zu machen:

<a href="#">
    <object>
        <embed src="img.svg"></embed>
    </object>
</a>

2) Entfernen Sie Zeigerereignisse aus dem Element object, sodass Klicks direkt an den Code <a> gesendet werden:

object{
    pointer-events: none;
}

a{
    display: inline-block; /* or block if you need */
}
2

Um einzelne Elemente in Ihrer SVG zu gestalten, können Sie entweder Javascript oder CSS im Defs-Tag verwenden oder auf ein externes Stylesheet verweisen.

<svg ...>
  <defs>
    <style type="text/css"><![CDATA[
      .myfigureclass {
        cursor: pointer;
      }
    ]]></style>
  </defs>

Überprüfen Sie diesen Link für weitere Informationen.

Sie können auch ein externes Stylesheet wie folgt für Ihre SVG-Datei verwenden:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.svg.css" ?>

<svg
   xmlns="http://www.w3.org/2000/svg"
   ...>
(...)
</svg>

Überprüfen Sie diesen Link für weitere Informationen.

1
Havok

Eine der einfachsten Lösungen kann die Verwendung von img tag anstelle von object tag sein

<img src="course/ani/male2.svg" style="left: 87px; bottom: 56px;"  />

idealerweise können Sie die SVG-Datei jedoch in die HTML-Datei einbetten. Das erlaubt Ihnen nicht, die SVG-Dateien zwischenzuspeichern, also fand ich die Verwendung von Javascript, um die SVG-Datei als Text zu laden und in das DOM einzufügen, das für das Caching zulässig ist, und bekam trotzdem die SVG direkt in das DOM, sodass sie alle CSS verwenden konnte Styles von Ihrer Seite.

0
Garr Godfrey