Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 10.08.2016, 17:02
Fanello Fanello ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2005
Beiträge: 68
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