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

【问题标题】：How to apply drop shadow on svg base map when mouse hover through css鼠标悬停在css上时如何在svg底图上应用投影
【发布时间】：2017-02-20 14:50:32
【问题描述】：

您好，我正在处理 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; 
}

【问题讨论】：

你指的是JSFiddle这样的东西吗？

标签： jquery html css svg

【解决方案1】：

您可以创建基于 svg 的投影。

.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

【讨论】：