我有一个地图代码，我想改变每个州的颜色。我的意思是:这个svg是地图，在地图中有许多状态，当我使用fill在css fpr的路径标签，它使所有的状态有相同的颜色，当使用它在每个路径标签它不工作。你能帮我一下吗?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;
}
这是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
});
});
这是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>
您可以为path标签添加fill属性例:
<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>