Rollover-overlays mit SVG

möchte ich erreichen, die Wirkung auf auf dieser Seite mit SVG. Wie Sie sehen können, verwendet es eine Reihe von PNG-transparent überlagert, wenn der Benutzer die Maus über ein Polygon-hotspot, gezeichnet auf ein Produkt.

Was ich erreichen will ist das gleiche wie mit der SVG, aber ohne messing über mit dem erstellen einer Last von PNGs, so dass, wenn der Benutzer die Maus über einer Fläche der transparenten Form (mit link darauf) erscheint über der Spitze. Die SVG-Form gebaut werden würde aus einem Satz von Koordinaten genau so, wie ein Polygon-hotspot auf einem Bild anzeigen.

Also ich denke, meine erste Frage ist, kann das getan werden, mit plain old SVG oder benötige ich so etwas wie Raphael um dies zu erreichen? Noch nie gesehen, diese Kraft, bevor mit SVG-also wenn jemand ein Beispiel wie das sehr nützlich sein würde.

Vielen Dank im Voraus.

  • FWIW, ich denke, dieser Effekt ist rückwärts mit Bezug auf das, was Sie sich wünschen aus einer usability-Perspektive. Rollen über ein Element, das macht es Grau und tot und Behinderte suchen? Stattdessen würde ich alle Gegenstände beginnen zu welken und/oder niedriger Deckkraft und Rollen über Sie, macht Sie 'pop', mit starken, lebhaften Farben.
InformationsquelleAutor El Guapo | 2011-05-05
  1. 6

    Es gibt mehrere Möglichkeiten, um diesen Effekt zu bekommen mit plain old SVG. Die wahrscheinlich einfachste ist die Verwendung von CSS in der SVG. Zum Beispiel:

    <style>
  .overlay:hover
  {
    opacity: 0.5;
  }
</style>

<svg>
  <a xlink:href="http://www.wherever/you/want/to/link/to.com">
    <path class="overlay" d="Coordinates of your shape..." />
  </a>
</svg>

    Habe ich geschrieben über verschiedene andere Methoden an:
    http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

    • Beachten Sie, dass die Deckkraft alleine nicht genau nachahmen, auf die verwiesen wird Wirkung mit einfachen unbeschnitten Bilder. Zum Beispiel die Sonnenbrille, die überlappung der Hose, sondern Rollen über die Sonnenbrille nicht dazu führen, dass die Hose, die sichtbar durch Sie.
    • Wahr. Wenn das der Effekt dann erforderlich, ich denke, man könnte einen zweiten, helleren Bild auf dem original mit visibility="hidden" und einem hover-Effekt der visibility="visible".
    • Danke für Eure Hilfe Jungs, sehr geschätzt. Obwohl letztlich, ich denke, ich werde gehen mit einer Lösung mit Raphael einfach weil ich es brauche, um cross-browser-kompatibel nach unten, um wenigstens den IE7.
    InformationsquelleAutor Peter Collingridge
  2. 3

    Ja, es kann getan werden mit SVG nur, mit oder ohne javascript.

    Einen Weg, um den Effekt zu erhalten, wäre die überlagerung einer weißen, semi-transparenten Pfad oben auf dem Bild, das Sie wollen, zu bleichen. Ein weiterer Weg wäre, um eine SVG-filter, um das Bild direkt, ähnlich zu dem, was ich getan habe, hier oder hier zu färben PNG (Quelltext der Seite ansehen und fühlen Sie sich frei, um die Wiederverwendung, die in irgendeiner Weise, die Sie mögen).

    Werden Sie wollen, stellen Sie die Verwendung des 'pointer-events' Eigentum wahrscheinlich. Hier ist ein Beispiel zeigt, wie erkennt Maus-Ereignisse auf die Füllung und/oder Kontur eines svg-Form, auch wenn die Form nicht sichtbar ist.

    InformationsquelleAutor Erik Dahlström
Schreibe einen Kommentar