当鼠标悬停在css上时，如何在svg base map上应用阴影

嗨我正在研究svg base map，其中我突出显示了一些特定位置，当用户鼠标悬停在它上面时，它弹出位置名称以及颜色变化，现在我的客户端需要使用投影效果，当用户鼠标悬停在它上面时，它的颜色变化以及投影效果。这是我的代码。当鼠标悬停在css上时，如何在svg base map上应用阴影

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; 
}

来源

2017-02-20 waqar hussain bangash

你指的是这样的[** **的jsfiddle（https://jsfiddle.net/vivekkupadhyay/qmrz3kjp）？ – vivekkupadhyay

您可以创建基于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

来源

2017-02-20 06:35:33 Aslam

当鼠标悬停在css上时，如何在svg base map上应用阴影

回答

相关问题