如何在通过css悬停鼠标时在svg底图上应用投影

Question

大家好，我在svg基础地图上工作，我在其中突出显示了一些特定的位置，当用户鼠标悬停在它上面时，它会弹出位置的名称和颜色变化，现在我的客户需要投影效果，当用户鼠标悬停在它上面时，它的颜色变化和投影效果也适用。这是我的代码。

svg代码

<path id="Middle East Region" class="enabled"  fill="#21669E" stroke="#FFFFFF" stroke-width="0.75" d=""</path>

<script>
  $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
    }); 
  });
</script>

这是css

.heyo:hover {
   fill: #CC2929;
   -moz-transition: 0.3s;
   -o-transition: 0.3s;
   -webkit-transition: 0.3s;
   transition: 0.3s; 
}

Answer 1

你可以创建基于svg的dropshadow。

.shadow {
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
            filter: drop-shadow( 3px 3px 2px rgba(0,0,0,.7) ); /* Same syntax as box-shadow */
}

您可以阅读有关此HERE的内容