javascript - 如何使作用于svg组的随机颜色函数为组中的所有元素调用相同的颜色
问题描述
我有一个创建随机颜色的函数。我在另一个函数中使用此函数来调用 svg 组的颜色 onclick。问题是组中的所有元素都会获得一种随机颜色,而对于组中的所有元素来说它应该是一种随机颜色。
我尝试调整调用颜色的函数。而且我无法正确调整随机函数。
function call1(){
const children = document.getElementById('btn1').children;
for(let i = 0; i < children.length; i++ ){
children[i].setAttribute('fill',getRandomColor());
}
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function setRandomColor() {
$("#colorpad").css("background-color", getRandomColor());
}
#svg-object{
height: 100vh;
width: 100%;
background-size: cover;
background-position: center center;
border: 15px antiquewhite;
position: absolute;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="800px" height="754px" viewBox="0 0 800 754" enable-
background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="call1()">
<polygon fill="#FF0013" points="366.699,131 410,56 453.301,131 "/>
<polygon fill="#07FF00" points="323.699,656 367,581 410.301,656
"/>
<polygon fill="#0000FF" points="409.699,656 453,581 496.301,656
"/>
<polygon points="366.699,581 410,656 453.301,581 "/>
</g>
</svg>
我希望组中的所有元素都变为一种随机颜色。``
解决方案
不要getRandomColor()
在循环内部调用,而是在外部调用它并设置一个变量。
function call1() {
const children = document.getElementById('btn1').children;
let color = getRandomColor();
for (let i = 0; i < children.length; i++) {
children[i].setAttribute('fill', color);
}
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function setRandomColor() {
$("#colorpad").css("background-color", getRandomColor());
}
#svg-object {
height: 100vh;
width: 100%;
background-size: cover;
background-position: center center;
border: 15px antiquewhite;
position: absolute;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="754px" viewBox="0 0 800 754" enable- background="new 0 0 800 754" xml:space="preserve">
<g id="btn1" onclick="call1()">
<polygon fill="#FF0013" points="366.699,131 410,56 453.301,131"/>
<polygon fill="#07FF00" points="323.699,656 367,581 410.301,656"/>
<polygon fill="#0000FF" points="409.699,656 453,581 496.301,656"/>
<polygon points="366.699,581 410,656 453.301,581"/>
</g>
</svg>
推荐阅读
- css - 包含 CSS 属性的对象的类型
- hyperledger-fabric - 如何在 Hyperledger Fabric 的容器中制作 core.yaml 效果
- amazon-web-services - 所有节点上的 Kubernetes DaemonSet Pods 调度都需要一个
- c - 在这个问题中,哪一个被称为函数声明(原型)?
- android - Gradle 错误:服务器返回 HTTP 响应代码:403 用于 URL:http://services.gradle.org/distributions/gradle-2.2.1-all.zip
- javascript - (React Context Beginner) React Context doesn't stat when changing page using react-rooter-dom
- python - 为什么这个语法对 python 不正确?
- npm - NPM:使用 npm-automation-token 获取 403 whoami
- list - 在 Haskell 中合并 3 个列表
- http - Tomcat 9 总是给出地址已经用于 http/https 连接器