2012-01-08 2 views
0

У меня есть некоторые встроенные svg-файлы на моем сайте. Я хотел бы использовать onmouseclick, onmouseout и onmousemove функции на них, но они не работают. Можно ли это сделать?Как вызвать функции мыши для встраивания данных?

+2

сделали вы пытались что-нибудь? вставьте код здесь –

+0

Я дал wmode = "transparent" для встраивания и функцию mouseclick для родительского div, но он не работает –

ответ

2

Это возможно только в том случае, если встроенный SVG-скрипт обслуживается из того же домена. После того, как встроенный контент завершит загрузку, вы хотите получить фактический документ svg с помощью getSVGDocument. Оттуда вы добавляете события. Проверьте это демо:

rect.svg

<svg xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    width="300" 
    height="200"> 
    <rect x="50" y="25" width="200" height="150" fill="red"/> 
</svg> 

eventsDemo.js

var log, emb, svgDoc, rect; 

log = function (e) { 
    console.log(e.type); 
}; 

emb = document.querySelector('embed'); 

emb.addEventListener('load', function() { 
    svgDoc = emb.getSVGDocument(); 
    rect = svgDoc.querySelector('rect'); 

    rect.addEventListener('click',  log); 
    rect.addEventListener('mousemove', log); 
    rect.addEventListener('mouseout', log); 
}); 

demo.html

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
    <embed type='image/svg+xml' src='rect.svg'> 
    <script src='eventsDemo.js'></script> 
</body> 
</html> 
Смежные вопросы