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!
|