javascript - 单击时更改 svg 元素的属性填充
问题描述
我是 JavaScript 和一般编程的新手。在做一个小学习项目时,我偶然发现了一个关于在点击时更改 SVG 元素颜色的小问题。我有一组特定的颜色和 SVG 元素,每次点击 SVG 都应该改变它的颜色。这是我尝试这样做的方式:http: //jsfiddle.net/j0u3rman/ 有人能指出我的错误吗?
var coatColor = [
'rgb(101, 137, 164)',
'rgb(241, 43, 107)',
'rgb(146, 100, 161)',
'rgb(56, 159, 117)',
'rgb(215, 210, 55)',
'rgb(0, 0, 0)'
];
// Function for acquiring a random element from an array
var getRandomElement = function (arr) {
var randomElement = Math.floor(Math.random() * arr.length);
return randomElement;
};
var changeAppearance = userSetting.querySelector('.setup-player');
var wizardCoat = changeAppearance.querySelector('.setup-wizard .wizard-
coat');
var changeCoat = function (arr) {
wizardCoat.style.fill = getRandomElement(arr);
}
wizardCoat.addEventListener('click', changeCoat(coatColor));
解决方案
我通过删除我不需要的东西来简化你的代码。您还必须知道,有时颜色会相同,因为随机函数可能会连续多次为您提供相同的颜色。
var coatColor = [
'rgb(101, 137, 164)',
'rgb(241, 43, 107)',
'rgb(146, 100, 161)',
'rgb(56, 159, 117)',
'rgb(215, 210, 55)',
'gold'
];
// Function for acquiring a random element from an array
var getRandomElement = function (arr) {
var randomElement = Math.floor(Math.random() * arr.length);
return randomElement;
};
var changeColor = function () {
this.style.fill = coatColor[getRandomElement(coatColor)];
}
wizard_head.addEventListener('click', changeColor);
svg{border:1px solid;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 86" class="setup-wizard">
<defs>
<rect id="wizard_head" x="20" y="5" width="20" height="20" />
</defs>
<g class="wizard">
<use xlink:href="#wizard_head" class="wizard-head"></use>
</g>
</svg>
推荐阅读
- xcode - 如何在命令行 xcode 构建中排除特定架构
- flexbox - Quasar Grid 左对齐最后一行的项目
- amazon-web-services - 从 AWS RDS 实例访问从 AWS RDS 快照导出到 S3 的数据库数据
- google-analytics - 为什么带有包含“gclid”的查询字符串的传入服务器请求格式错误?
- vue.js - Vuetify - 使用 URL 参数同步分页
- java - Kafka No Acknowledgement 可用作参数
- python - PyDrake:从机器人中提取 AutoDiff 梯度(通过微分逆运动学控制)
- php - Laravel PHP以特定方式返回数组
- c# - MVC SPA 应用程序
- .net - 在 Azure 中发布:不匹配依赖项错误。是什么导致它以及在通过管道使用发布时如何解决它?