2017-08-30 62 views
0

我正在學校項目中顯示由點組成的世界地圖。在這張世界地圖上,我想給人們關於世界上有多少恐怖主義以及去年哪些地區遭到襲擊的想法。顯示區域標題當在圓圈svg對象上懸停時

我目前正在爲這些「圈子」之一懸停文字。我想讓文字在某個「圓形對象」或點上懸停時出現。我給了這些特定的圈子AreaTitle,但我似乎無法找到如何顯示這個AreaTitle像懸停文本框。

var xCords = [ 
 
     '171.8' 
 
    ]; 
 
    var yCords = [ 
 
     '23.6' 
 
    ]; 
 

 
    for (var i = 0; i < xCords.length; i++) { 
 
     var newCircle = document.createElementNS('http://www.w3.org/2000/svg','circle'); 
 
     newCircle.setAttribute('cx', xCords[i]); 
 
     newCircle.setAttribute('cy', yCords[i]); 
 
     newCircle.setAttribute('r', '1'); 
 
     newCircle.setAttribute('class', i); 
 
     if(i === 1) { 
 
     var areaTitle; 
 
     \t newCircle.setAttribute('fill', '#ff0000'); 
 
     switch(i) { 
 
      case 1: 
 
       areaTitle = 'Istanbul'; 
 
       newCircle.setAttribute('class', 'istanbul'); 
 
       break; 
 
     } 
 
     newCircle.setAttribute('title', ''+areaTitle+''); 
 
     $('#worldmap').append(newCircle); 
 
     } else { 
 
     \t newCircle.setAttribute('fill', '#5c5c5c'); 
 
     $('#worldmap').prepend(newCircle); 
 
     } 
 

 
    }
body { 
 
    background-color: #000; 
 
} 
 

 

 
@keyframes blink { 
 
    0% { 
 
    stroke: rgba(255, 0, 0, 0.8); 
 
    stroke-width: 1; 
 
    } 
 
    100% { 
 
    stroke: rgba(215, 18, 0, 0.1); 
 
    /*stroke-width: 40;*/ 
 
    } 
 
} 
 

 
circle[fill="#ff0000"] { 
 
    padding: 20px; 
 
    position: relative; 
 
    /*stroke-width: 30;*/ 
 
    animation: blink 1.5s infinite ease-out; 
 
} 
 

 
.istanbul { 
 
    stroke-width: 30; 
 
}
<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Terrorism</title> 
 

 

 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
 
     <link rel="stylesheet" href="css/style.css"> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
<div class="container"> 
 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 900 720" enable-background="new 0 0 900 720" xml:space="preserve" id="worldmap"> 
 
</svg> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
</div> 
 

 
    <script src="js/index.js"></script> 
 

 
</body> 
 
</html>

Link to Image

+0

請,創建的jsfiddle所以我們可以編輯 – Dacklf

+0

我創建了一個的jsfiddle,但我有縮短的XY電線,因爲文本限制達到。 – NvG

+0

這是充滿錯誤:不存在的參考文件,不安全的js庫...請創建一個https://jsfiddle.net,並更具體如果你想要一些幫助 – Dacklf

回答

0

SVG元素不使用title屬性。您需要改爲使用<title>元素。

<svg> 
 
    <circle cx="150" cy="75" r="70" fill="red"> 
 
    <title>This is a circle</title> 
 
    </circle> 
 
</svg>

相關問題