Embed 데이터에 마우스 기능을 호출하는 방법은 무엇입니까?

내 웹 사이트에 일부 svg 파일을 포함시키고 있습니다. onmouseclick, onmouseout 및 onmousemove 함수를 사용하려고하지만 작동하지 않습니다. 그것을 할 수 있습니까?Embed 데이터에 마우스 기능을 호출하는 방법은 무엇입니까?

출처

2012-01-08 Danny Fox

당신이 무엇이든을 시도했다 :이 데모를 확인? 여기에 일부 코드 붙여 넣기 –

wmode = "transparent"를 embed에, mouseclick 함수를 부모 div에 지정했지만 작동하지 않습니다. –

내장 된 SVG 스크립트가 동일한 도메인에서 제공되는 경우에만 가능합니다. 임베드 된 컨텐츠로드가 완료되면 getSVGDocument으로 실제 svg 문서를 보유하고자합니다. 거기에서 이벤트를 추가합니다.

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>

출처

2012-01-09 01:43:42 bennedich

Embed 데이터에 마우스 기능을 호출하는 방법은 무엇입니까?

답변

관련 문제