XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Grafik, Design, Typografie (http://xhtmlforum.de/forumdisplay.php?f=86)
-   -   Karte als SVG - mehrere Bereiche bei Mouseover aktiv (http://xhtmlforum.de/showthread.php?t=72954)

Fanello 10.08.2016 17:02

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!

protonenbeschleuniger 10.08.2016 17:11

Ich bin kein Experte was SVG angeht, aber wenn du das :hover auf das g Element legst, dann funktioniert es im Firefox

Fanello 10.08.2016 17:15

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 :oops:

Danke!!!


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020