|
|||
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> Danke! |
Sponsored Links |
|
|||
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!!! |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |