如果我将鼠标悬停并检查它会显示，但根本看不到。图像在同一文件夹中。我认为所有文件名都是正确的，但是我不确定是什么问题。请帮忙，这只是一个基本的笔记文件。
JS：
const renderLoader = parent => {
const loader = `
<div class="loader">
<svg>
<use href="32. spinner.png"></use>
</svg>
</div>
`
document.querySelector(parent).insertAdjacentHTML('afterbegin', loader);
}
HTML
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="32. loading spinner.css">
<script src="32. loading spinner.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading spinner Notes</title>
</head>
<body>
<div class="results">
<h1>RESULTS DIV</h1>
</div>
<div class="answers">
<h1>ANSWERS DIV</h1>
</div>
<!-- EVERYTHING IS WORKING BUT THE SPINNER IS NOT SHOWING THE IMAGE -->
<input value="load spinner for results" type="submit" onClick="renderLoader('.results')">
<input value="load spinner for answers" type="submit" onClick="renderLoader('.answers')">
<h1>Look at console</h1>
</body>
</html>
CSS
.loader {
margin: 5rem auto;
text-align: center; }
.loader svg {
height: 5.5rem;
width: 5.5rem;
/* fill: #F59A83; */
transform-origin: 44% 50%;
animation: rotate 1.5s infinite linear; }
@keyframes rotate {
0% {
transform: rotate(0); }
100% {
transform: rotate(360deg); } }
[当您尝试使用.PNG文件时，我看到了微调器的标记是and标记，因此请使用常规img标记或正确使用这些标记，
我认为您的标记应如下所示：
<svg>
<use xlink:href="path/to/svg/file.svg#SVG_ID"></use>
</svg>