0
私はドットから作られた世界地図を表示している学校プロジェクトに取り組んでいます。この世界地図では、世界にどのくらいのテロがあり、過去1年間にどの地域にヒットしたのかを人々に伝えたいと思っています。Show AreaTitleサークル上にホバリングしたときオブジェクト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>
してください、私たちは私がJsFiddleを作成しましたが、テキストの上限に達しましたので、私は、XYコードを短くしている – Dacklf
を編集できるようにjsfiddleを作成します。 – NvG
これはエラーでいっぱいです：存在しない参照ファイル、安全でないjsライブラリ... https://jsfiddle.netを作成してください。 – Dacklf