时间戳

首页 > 解决方案 > 如何更改 html 和 css 中 svg 文件中每个路径的颜色？

html - 如何更改 html 和 css 中 svg 文件中每个路径的颜色？

问题描述

我有这个地图代码，我想更改每个州的颜色。我的意思是：这个 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>

标签： htmlcsssvg

解决方案

您可以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>

推荐阅读