移动设备上的 SVG 对象问题

Question

我已经尝试了所有方法，但我觉得我在这里有点难以理解。我创建了一个在桌面上运行完美的网站，但在移动设备上，悬停元素将无法运行。我正在使用 SVG 对象。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>F1 2021: Round 22 Abu Dhabi Grand Prix</title>
</head>

<body>

<style>
.circuit-map {
position: relative;
background-image: url(/circuits/round-01/bahrain.svg);
background-position: center;
overflow: hidden;
background-size: cover;
}
.circuit-map > img {
    display: block;
    width: 100%;
    height: 100%;
    
}

.circuit-map .circuit-controls {
    position: absolute;
    overflow: hidden;
    display: flex;
    transition: 0.3s;
    cursor: pointer;
}
.circuit-map .circuit-controls img {
    display: none;
    width: calc(100%);
    min-width: calc(100%);
}

.circuit-map .circuit-controls#statsLeft,
.circuit-map .circuit-controls#statsRight {
    top: 0;
    width: 4%;
    height: 84%;
    margin: 4.4% 0;
}
.circuit-map .circuit-controls#statsLeft {
    left: 0;
    flex-direction: row-reverse;
}
.circuit-map .circuit-controls#statsRight {
    right: 0;
}

.circuit-map .circuit-controls#statsLeft:hover,
.circuit-map .circuit-controls#statsRight:hover {
    width: 95.65%;
}

.circuit-map .circuit-controls#statsTop,
.circuit-map .circuit-controls#statsBottom {
    left: 0;
    height: 7.5%;
    width: 91.5%;
    margin: 0 4.25%;
}

.circuit-map .circuit-controls#statsTop {
    top: 0;
    flex-direction: column-reverse;
}
.circuit-map .circuit-controls#statsBottom {
    bottom: 0;
    flex-direction:column;
}

.circuit-map .circuit-controls#statsTop:hover,
.circuit-map .circuit-controls#statsBottom:hover {
    height: 92.1%;
}

</style>

<header>
<hr style="height:1px;background-color:white">
<h1>Round 01 Bahrain Grand Prix</h1>
<h2 style="font-size: 36px;">Sakhir Circuit, Bahrain</h2>
<br>
<h2>31 Dec, 2021</h2>

</header>
<br>
<br>
<section class="container">
<div class="circuit-map">
<img
id="circuitImage"
src="circuit.svg"
alt="Sakhir Circuit, Bahrain"
/>
<div class="circuit-controls" id="statsLeft">
<object type="image/svg+xml" data="starting-grid.svg"></object></div>
<div class="circuit-controls" id="statsRight">
<object type="image/svg+xml" data="race-results.svg"></object></div>
<div class="circuit-controls" id="statsBottom">
<object type="image/svg+xml" data="sprint-results.svg"></object></div>
<div class="circuit-controls" id="statsTop">
<object type="image/svg+xml" data="stats-top.svg"></object></div>
</div>

<script>
const circuitImageDOM = document.getElementById('circuitImage');

function calculateStatsSizes() {
const statsXDOM = [
document.querySelector('#statsLeft object'),
document.querySelector('#statsRight object'),
];
const statsYDOM = [
document.querySelector('#statsTop object'),
document.querySelector('#statsBottom object'),
];

const parentSizes =
statsXDOM[0].parentElement.parentElement.getBoundingClientRect();
const parentWidth = parentSizes.width;
const parentHeight = parentSizes.height;

statsXDOM.forEach(stat => {
stat.style.minWidth = `${parentWidth}px`;
stat.style.display = 'block';
});
statsYDOM.forEach(stat => {
stat.style.minHeight = `${parentHeight}px`;
stat.style.display = 'block';
});
}
circuitImageDOM.addEventListener('load', calculateStatsSizes);
window.addEventListener('resize', calculateStatsSizes);

circuitImageDOM.setAttribute(
'src',
`${circuitImageDOM.getAttribute(
'src'
)}?preventCache=${Math.random()}`
);
</script>
</body>

</html>

我似乎无法在移动设备上运行它 - 作为参考，这里是已发布的网站 https://drivetodescribe.com/circuits/round-01/index.html。有人可以帮忙吗？

Answer 1

您说的是在移动设备上悬停。但是除非你有鼠标或其他指向设备连接到移动设备（这显然是不正常的），否则你不能指望移动设备上的悬停，因为它只是记录触摸。

通常您会使用 click 事件，指针事件，例如 pointerdown 或 pointerup（鼠标和触摸均适用）。或直接触摸事件（如 touchstart 或 touchend，仅适用于触摸输入）。

因此，您可以将概念从悬停在侧面上转换为打开或关闭侧面之类的东西。或者让它们在 pointerdown（或 touchstart）上打开并在 pointerup（或 touchend）上关闭。

移动设备上的 SVG 对象问题

Issues with SVG objects on Mobile

javascript

css

mobile

svg