-2

I have this code for a map and I want to change the color for each state. what I mean is: this svg is for map and there is many states in the map when I use fill in css fpr the path tag it make all states have same color and when use it inside each path tag it does NOT work. Can you help me please? This is the css

<style>
    *{
        margin: 0;
        padding: 0;

    }
    body{
        background-color: #01171b;
    }
    svg path{
        fill:#949596;
        stroke:"#ccc";
        stroke-width:.25;

    }
    svg path:hover {
        fill:#698994;
        transition: 0.6;
        cursor: pointer;

    }

   
    .description{
  pointer-events: none;
  position: absolute;
  font-size: 18px;
  text-align: center;
  background: white;
  padding: 10px 15px;
  z-index: 5;
  height: 30px;
    line-height: 30px;
  margin: 0 auto;
  color: #21669e;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #eee;
  display: none;
}
.description.active{
    display: block;
}
.description:after{
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    margin-left: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
    }

this is JS

$description = $(".description");

    $('.enabled').hover(function() {
      
      $(this).attr("class", "enabled heyo");
      $description.addClass('active');
      $description.html($(this).attr('id'));
    }, function() {
      $description.removeClass('active');
    });
  
  $(document).on('mousemove', function(e){
    
    $description.css({
      left:  e.pageX,
      top:   e.pageY - 70
    });
    
  });

this is HTML

    <?xml version="1.0"?>

<svg style="margin-left: 350px;" width="1100px"  viewbox="0 0 1000 825">

<a xlink:title="نجران" class="enabled"xlink:href="https://www.google.com/search?q=%D9%86%D8%AC%D8%B1%D8%A7%D9%86">
 <path  d="M338 797.8l-0.6 0-0.3-0.2-0.4-0.6-0.4-0.4 0.4-0.6 1.1-1.4 0.6 0.1 0.5 0.4 0.7 0.8 0 0.2 0.2 0.7-0.4 0.5-0.7 0.4-0.7 0.1z m-216.5-409.5l-0.2 0.6-0.6-0.3-0.8-0.3-0.4 0-0.2 0.1 0-0.9 0.2-0.6 0.5 0 0.5 0.3 1 1.1z m-63.3-112.6l0.2 0.5-0.9-1.1-0.7-0.7 0-0.7-0.1-0.5 0.3-0.1 0.9 1.4 0.3 0.8 0 0.4z" id="SAU99" name="">
   
</path>


 <path fill=""d="M610.1 788.2l-0.1 0.1-5.4 3.2-5.8 3.4-1.4 0.6-1.5 0.2-6.9-0.3-0.6-0.4-4-5.6-6.6-9.2-1.8-1-18.3 2.5-20.5-2.1-11.8-1.2-10-1-2.2-0.8-7.7-4.5-2.6-0.5-15-0.1-9.6-0.1-1.1 0.2-2.9 1.2-1.4 0-3.2-0.6-2.9-0.1-4.6 0.4-3.6 0.9-0.9 0.1-2-0.6-1-0.2-0.7 0.6-0.7 1.2-0.7 0.9-0.9 0.4-1.2-0.2-1.9-0.9-0.8-0.1-1 0.5-0.7 0.9-0.6 1-0.8 0.7-1.1 0.2-0.5-0.2-0.3-0.1-0.4-0.6 0.2-1 0-0.6-0.3-0.1-1.1 0.3-0.9 0.1-1.8-0.2-1.8 0.2-0.9 0-0.9-0.3-2-1.6-2.4-2.7 0-1.6 1.3-5-0.1-2.6-0.9-3.1-0.2-1.2 0.1-1.3 0.4-2 1.2-11.1-0.1-2.1-0.5-2-0.7-2.2-0.5-2.2 0-1.3 0.5-1.4 0.9-1.8 1.2-1.6 7.7-8.1 5.3-4.6 1.5-1.6 0.6-0.8 0.6-1 1.1-2.7 0.6-1.2 1-1.2 1.2-0.7 1.1-0.5 3.2-0.7 2.1-0.7 2.2-1.1 2.1-1.4 0.9-0.9 0.7-0.9 0.6-1 0.5-1.3 0.3-1.3 0.2-1.9 0-1.7-0.3-2.3-1.6-6.4 0-1.2 0.3-1.3 1.1-1.8 1.1-1 3.2-1.6 0.7-0.6 0.5-0.7 0.3-1.1 0.2-1.6 0-6.4 13.2 8.3 3.4 1.7 2.5 1 4.5 1.1 12.2 0.8 111-12 6.2-1.8-15 121.8z" id="SAU1096" name="Najran">
 </path></a>
</svg>
<div class="description"></div>
</body>
salma baian
  • 7
  • 5

1 Answers1

-1

you can just add fill attribute for path tag ex:

<path fill="red" d="M610.1 788.2l-0.1 0.1-5.4 3.2-5.8 3.4-1.4 0.6-1.5 0.2-6.9-0.3-0.6-0.4-4-5.6-6.6-9.2-1.8-1-18.3 2.5-20.5-2.1-11.8-1.2-10-1-2.2-0.8-7.7-4.5-2.6-0.5-15-0.1-9.6-0.1-1.1 0.2-2.9 1.2-1.4 0-3.2-0.6-2.9-0.1-4.6 0.4-3.6 0.9-0.9 0.1-2-0.6-1-0.2-0.7 0.6-0.7 1.2-0.7 0.9-0.9 0.4-1.2-0.2-1.9-0.9-0.8-0.1-1 0.5-0.7 0.9-0.6 1-0.8 0.7-1.1 0.2-0.5-0.2-0.3-0.1-0.4-0.6 0.2-1 0-0.6-0.3-0.1-1.1 0.3-0.9 0.1-1.8-0.2-1.8 0.2-0.9 0-0.9-0.3-2-1.6-2.4-2.7 0-1.6 1.3-5-0.1-2.6-0.9-3.1-0.2-1.2 0.1-1.3 0.4-2 1.2-11.1-0.1-2.1-0.5-2-0.7-2.2-0.5-2.2 0-1.3 0.5-1.4 0.9-1.8 1.2-1.6 7.7-8.1 5.3-4.6 1.5-1.6 0.6-0.8 0.6-1 1.1-2.7 0.6-1.2 1-1.2 1.2-0.7 1.1-0.5 3.2-0.7 2.1-0.7 2.2-1.1 2.1-1.4 0.9-0.9 0.7-0.9 0.6-1 0.5-1.3 0.3-1.3 0.2-1.9 0-1.7-0.3-2.3-1.6-6.4 0-1.2 0.3-1.3 1.1-1.8 1.1-1 3.2-1.6 0.7-0.6 0.5-0.7 0.3-1.1 0.2-1.6 0-6.4 13.2 8.3 3.4 1.7 2.5 1 4.5 1.1 12.2 0.8 111-12 6.2-1.8-15 121.8z" id="SAU1096" name="Najran">
 </path></a>
salma baian
  • 7
  • 5