Question

我想在我的网页上添加一张汽车的图片，我想在鼠标悬停在图像上时弹出一些关于汽车的信息。我正在使用D3。

d3.xml("images/car.svg", "image/svg+xml", function(error, xml) {
  if (error) throw error;
  xml.documentElement.id = 'car';
  xml.documentElement.childNodes[1].style = 'fill:'+ col_carbondioxide +'; width: 30%';
  xml.documentElement.setAttribute("height", pic_height);
  document.getElementById('introduction').appendChild(xml.documentElement);
});

如何为例如添加事件侦听器鼠标悬停？

Answer 1

只需使用addEventListener收听mouseover和mouseout次活动：

＆＃13;

var col_carbondioxide = 'red';
var pic_height = 200;
var url = 'https://upload.wikimedia.org/wikipedia/commons/8/86/Orange_sport_car.svg';
var container = document.getElementById('introduction');

d3.xml(url, 'image/svg+xml', function(xml) {
  if (xml && xml.documentElement) {
    xml.documentElement.id = 'car';
    xml.documentElement.childNodes[1].style = 'fill:'+ col_carbondioxide +'; width: 30%';
    xml.documentElement.setAttribute('height', pic_height);
    var car = container.appendChild(xml.documentElement);
    car.addEventListener('mouseover', function() {
      console.log('Show some information about the car.');
    }, false);
    car.addEventListener('mouseout', function() {
      console.log('Hide some information about the car.');
    }, false);
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="introduction"></div>

＆＃13;

Answer 2

你可以像这样使用addEventListener：

document.getElementById("car").addEventListener('mouseover', whenMouseOver, false);

function whenMouseOver() {
    console.log("Mouse over !");
}

由于SVG只是XML而且可以在HTML中使用，因此您只需使用正确的id作为正确的元素。

如何将（鼠标）事件添加到SVG的XMLDocument

2 个答案: