當鼠標懸停在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上應用陰影

回答

相關問題