我创建了一个简单的代码来使用 SVG 文件和事件监听器来进行研究和学习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Mouse Pointer Change</title>
<style>
#svg5 {
width: 50%; /* Adjust the width as needed */
height: auto; /* Maintain aspect ratio */
}
</style>
<script>
window.onload = function() {
var svgObject = document.getElementById('svg5');
svgObject.addEventListener('load', function() {
var svgDocument = svgObject.contentDocument;
var rect = svgDocument.getElementById('rect237');
// Function to change mouse pointer to crosshair
function changeCursorToCrosshair() {
console.log("Mouse entered rect237");
document.body.style.cursor = 'crosshair';
}
// Function to change mouse pointer to default
function changeCursorToDefault() {
console.log("Mouse left rect237");
document.body.style.cursor = 'default';
}
// Add event listener for mouse enter
rect.addEventListener('mouseenter', function() {
console.log("Mouse entered rect237");
changeCursorToCrosshair();
});
// Add event listener for mouse leave
rect.addEventListener('mouseleave', function() {
console.log("Mouse left rect237");
changeCursorToDefault();
});
});
};
</script>
</head>
<body>
<object id="svg5" type="image/svg+xml" data="./img/simple_pitch.svg"></object>
</body>
</html>
但是，在测试代码时没有任何反应。我添加了一些控制台日志，但没有显示任何内容。我希望有人能让我知道我错过了什么。
谢谢
有两件事：
window.load<object>window.load<object>datasvgObjectloadsvgObject.addEventListener('load', ...window.onload然后，
document.body.style.cursor = 'crosshair';outerHTML 文档的
cursor 标签的 <body><rect><object>svgDocument.documentElement.style.cursor = ...rect { cursor: crosshair }