zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Grafik, Design, Typografie
Seite neu laden Karte als SVG - mehrere Bereiche bei Mouseover aktiv

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.08.2016, 18:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 63
Fanello befindet sich auf einem aufstrebenden Ast
Standard Karte als SVG - mehrere Bereiche bei Mouseover aktiv

Liebe Community

Ich will auf einer Website eine Weltkarte darstellen, wobei sich beim mouseover der jeweilige Kontinent farblich verändert.

Nun habe ich aber das Problem, dass sich nicht alle Bereiche des jeweiligen Kontinent farblich anpassen. Wenn ich z.B. mit der Maus Afrika wähle, dann wird zwar praktisch das ganze Festland blau, jedoch nicht Madagaskar.

Das ist mein bisheriger Ansatz (der Übersichts halber nur auf Afrika reduziert):
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 188 195" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
  <style type="text/css">
    path {
        transition: .6s fill;
        fill: #D3D3D3;
    }
    path:hover {
        fill: #009fe3;
    }
  </style>
  <a href="">
  <g id="Afrika">
    <path d="M180.069,128.868c-1.846,2.815 -3.462,5.807 -4.224,9.624c-4.566,0.958 -6.882,3.886 -9.438,6.733c-0.848,3.32 1.523,3.714 1.037,6.721c-0.949,2.012 -1.674,4.263 -3.191,5.776c2.295,4.34 -0.725,8.177 3.191,11.543c3.41,0.177 4.442,-1.71 8.401,-0.973c2.287,-4.306 1.404,-6.209 4.224,-10.57l0,-4.814c0.252,-1.079 1.155,-1.499 2.097,-1.941c-1.915,-4.209 1.933,-8.198 2.156,-15.375c-3.948,0.052 0.095,-7.15 -4.253,-6.724" />
    <path d="M2.206,54.829c0,1.886 -2.857,1.216 -2.068,3.833l4.182,0c0.309,-2.204 -0.287,-3.626 -2.114,-3.833" />
    <path d="M185.309,67.319c-4.501,-0.58 -4.25,3.144 -8.372,2.891l-9.493,0c-0.505,-6.586 -5.747,-8.864 -9.5,-12.499c0.935,-6.32 -6.249,-5.187 -4.198,-12.522c-1.785,-2.185 -5.067,-3.057 -6.301,-5.754c0.933,-2.706 -1.19,-6.877 -0.247,-7.587c-0.268,-0.683 -0.591,-1.448 -0.952,-2.266c-0.298,0.241 -0.733,0.395 -0.882,0.252c-0.379,-0.351 0.124,-0.809 0.561,-0.974c-1.91,-4.259 -4.608,-9.581 -5.653,-11.624c-0.076,0.018 -0.141,0.044 -0.225,0.052c-7.653,-2.557 -17.193,-3.463 -27.366,-3.817c-3.035,0.731 -2.51,4.741 -5.241,5.793c-4.838,-4.576 -14.417,-4.826 -18.902,-9.633c0.804,-3.333 -1.204,-4.081 -2.116,-5.787c2.453,-0.266 2.401,-2.576 1.018,-3.841c-6.361,-0.067 -11.423,1.085 -15.79,2.877c-8.531,-0.456 -15.934,0.136 -20.011,3.873c-0.896,-2.024 -3.042,-2.964 -6.285,-2.909c-0.873,3.39 -4.652,4.071 -7.345,5.787c-2.861,4.514 -1.788,10.408 -4.187,14.412c-1.579,2.534 -7.227,5.138 -9.512,7.706c-0.169,5.621 -2.592,9.174 -5.274,12.507l0,24.991c3.638,3.736 6.818,7.912 8.451,13.445c4.844,2.627 8.098,6.727 14.714,7.692c4.245,-0.948 9.272,-1.156 14.737,-0.948c2.178,-1.562 2.032,-5.187 6.356,-4.814c1.874,0.158 0.598,3.252 2.125,3.833c4.845,-0.613 6.702,1.542 10.48,1.929c1.799,-0.842 2.676,-2.682 6.318,-1.929c1.057,7.429 -2.241,10.833 -2.127,17.341c3.002,4.93 8.137,8.662 6.332,15.376c2.78,3.232 2.97,8.816 4.21,13.458c-2.603,4.372 -2.002,11.588 -4.21,16.337c4.508,3.915 7.765,8.922 9.511,15.402l0,8.658c4.66,4.994 4.544,14.371 9.44,19.234c10.12,-0.674 15.187,-5.942 24.21,-7.687c1.6,-5.289 4.796,-9.063 9.437,-11.547c-0.527,-3.731 1.897,-4.704 1.027,-8.658c1.892,-0.874 2.706,-2.683 6.343,-1.942c0.115,-11.09 4.411,-18.352 12.657,-22.109c1.535,-7.83 1.535,-19.099 0,-26.912c2.216,-3.728 4.018,-7.819 5.205,-12.508c2.521,-1.56 4.641,-3.45 7.391,-4.818c5.007,-6.637 9.548,-13.726 14.752,-20.164c0.801,-3.608 2.197,-8.517 -1.086,-10.597" />
  </g>
</a>
</svg>
Hat jemand vielleicht einen Vorschlag, wie ich alle zu einem Kontinent dazugehörenden Länder bzw. Inseln für ein Mouseover gruppieren kann?

Danke!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.08.2016, 18:11
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.647
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Ich bin kein Experte was SVG angeht, aber wenn du das :hover auf das g Element legst, dann funktioniert es im Firefox
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.08.2016, 18:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 63
Fanello befindet sich auf einem aufstrebenden Ast
Standard

du bist zwar kein Experte, aber trotzdem genial

Es funktioniert genau so wie du es gesagt hast. Wenn ich mir den Code näher anschaue ist es ja eigentlich auch logisch.. Schlussendlich gewöhnliches CSS

Danke!!!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
mehrer aktive links auf einer Seite als aktiv setzen? Luziefer CSS 5 02.02.2012 11:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:18 Uhr.