Как добавить событие (мышь) к XMLDocument SVG

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 события:

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() { 
 
     alert('Show some information about the car.'); 
 
    }, false); 
 
    car.addEventListener('mouseout', function() { 
 
     alert('Hide some information about the car.'); 
 
    }, false); 
 
    } 
 
});

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

Answer 2

Вы можете просто использовать addEventListener так:

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

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

Поскольку SVG только XML и может использоваться внутри HTML, вам нужно использовать только righ t id для правого элемента.