Question

我正在开展一个学校项目，展示一个由圆点组成的世界地图。在这张世界地图中，我想让人们知道世界上有多少恐怖主义，以及过去一年中哪些地方受到了打击。

我正在努力将文字悬停在其中一个“圈子”上。我希望在悬停在某个“圆形对象”或圆点上时显示文本。我已经将这些特定圈子给了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;
      	newCircle.setAttribute('fill', '#ff0000');
        switch(i) {
            case 1:
                areaTitle = 'Istanbul';
                newCircle.setAttribute('class', 'istanbul');
                break;
        }
        newCircle.setAttribute('title', ''+areaTitle+'');
        $('#worldmap').append(newCircle);
      } else {
      	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

Answer 1

SVG元素不使用title属性。您需要使用<title>元素。

＆＃13;

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

＆＃13;

当圈在svg对象上时显示AreaTitle

1 个答案: