我成功获得了头部和颜色轮廓，两个 SVG 文件，完全对齐。但有一个问题：我想在每次按下“s”时将头部颜色更改为随机颜色。但不知怎的，它并没有改变头部的颜色，尽管 getRandomColor 确实有效；
// Function to generate a random color
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Function to change the color of the path element
function changePathFillColor() {
const pathElement = document.getElementById('path-to-change');
if (pathElement) {
const randomColor = getRandomColor();
pathElement.setAttribute('fill', randomColor);
}
}
// Listen for the 'S' key press
document.addEventListener('keydown', function(event) {
if (event.key === 's' || event.key === 'S') {
changePathFillColor();
}
});
至于 HTML 代码，我决定获取头部颜色的 svg 文件的内容并重新组织代码，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Character Assembly</title>
<link rel="stylesheet" href="player.css">
</head>
<body>
<div class="character">
<!-- Outline SVG -->
<div class="head">
<svg id="svg-to-change" xmlns="http://www.w3.org/2000/svg" width="150" height="90">
<g transform="matrix(1.0, 0.0, 0.0, 1.0, 75.0, 45.0)">
<path d="M75.0 0.0 Q75.0 18.65 53.0 31.8 31.05 45.0 0.0 45.0 -31.05 45.0 -53.05 31.8 -75.0 18.65 -75.0 0.0 -75.0 -18.65 -53.05 -31.85 -31.05 -45.0 0.0 -45.0 31.05 -45.0 53.0 -31.85 75.0 -18.65 75.0 0.0" fill="#ffcc66" fill-rule="evenodd" stroke="none"/>
</g>
<image href="/svgs/head/shapes/9.svg" id="headoutline"/>
</svg>
</div>
<!-- <object data="body.svg" type="image/svg+xml" class="part body"></object>
<object data="leftarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="rightarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="leftlegs.svg" type="image/svg+xml" class="part legs"></object>
<object data="rightlegs.svg" type="image/svg+xml" class="part legs"></object>-->
</div>
<script src="player.js"></script>
</body>
</html>
这是我的 CSS 代码。
.character {
position: relative;
width: 200px; /* Adjust the size as needed */
height: 400px; /* Adjust the size as needed */
}
.part {
position: absolute;
}
.head {
animation: float 2s ease-in-out infinite;
position: relative;
}
.headcolor {
z-index: 1;
margin-top: -500px;
position: relative;
}
.headoutline {
z-index: 2;
position: relative; margin
width: 100%;
height: 100%;
}
@keyframes float {
0%, 100% {
transform: translateY(0); /* Starting position */
}
50% {
transform: translateY(-5px); /* Float up by 10 pixels */
}
}
我猜测为什么这不起作用是因为涉及两个 SVG 文件，并且系统不知道要更改哪一个的颜色。所以我想我应该向公开的 SVG 添加一个 ID，但我不知道如何在 JavaScript 代码中指向它。那么我该怎么做才能让这项工作成功呢？
尝试内联您的SVG：
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
document.addEventListener('keydown', (event) => {
if (event.key === 's' || event.key === 'S') {
const circle = document.getElementById('colorCircle');
circle.setAttribute('fill', getRandomColor());
}
});body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
svg {
width: 100px;
height: 100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Circle Color Changer</title>
</head>
<body>
<svg>
<circle id="colorCircle" cx="50" cy="50" r="50" fill="blue"></circle>
</svg>
</body>
</html>