使用JavaScript函数中的数据更改SVG路径颜色

我有一个类似的问题，比如和：

我了解了如何按颜色更改SVG：

var elements = document.getElementsByClassName("name_here");
elements[0].style.fill = "red";

但是我想使用一个键值对向量，其中键是类名，值将决定填充的颜色

现在SVG都是黑色的，但是如果我包括一个向量：

var body_data = [
  {"head": 10 },
  {"left-shoulder": 20}, 
  {"right-shoulder": 100}, 
  {"left-arm": 50}, 
  {"right-arm": 70},
  {"left-hand": 30},
  {"right-hand": 15}, 
  {"chest": 30},
  {"stomach":80}, 
  {"left-leg": 25}, 
  {"right-leg": 17}, 
  {"left-foot": 42},
  {"right-foot": 100}
]

我可以在下面这样的函数中使用它（不起作用）来使用键作为类名和值来为每个身体部位着色吗

function gradientColor(bodypart) {
  if bodypart < 25 {
    var elements = document.getElementsByClassName(bodypart);
    elements[0].style.fill = "blue";
  } else if bodypart > 25 & bodypart < 50 {
     var elements = document.getElementsByClassName(bodypart);
    elements[0].style.fill = "white";
  } else if {
    var elements = document.getElementsByClassName(bodypart);
    elements[0].style.fill = "red";
  } else {
    var elements = document.getElementsByClassName(bodypart);
    elements[0].style.fill = "maroon";
  }
}

。人体{
宽度：207px；
位置：相对位置；
填充顶部：240px；
高度：260px；
显示：块；
利润率：40px自动；
}
.人体svg：悬停{
光标：指针；
}
.人体svg：悬停路径{
填充：#ff7d16；
}
.人体{
位置：绝对位置；
左：50%；
}
.人体svg#头部{
左边距：-28.5px；
顶部：-6px；
}
.人体svg#左肩{
左边距：-53.5px；
顶部：69px；
}
.人体svg#右肩{
左边距：13.5px；
顶部：69px；
}
.人体svg#左臂{
左边距：-78px；
顶部：112px；
}
.人体svg#右臂{
左边距：38px；
顶部：112px；
z指数：10001；
}
.人体svg#胸部{
左边距：-43.5px；
顶部：88px；
}
.人体svg#胃{
左边距：-37.5px；
顶部：130像素；
}
.人体svg#左腿{
左边距：-46.5px；
顶部：205px；
z指数：9999；
}
.人体svg#右腿{
左边距：1.5px；
顶部：205px；
z指数：9999；
}
.人体svg#左侧{
左边距：-102.5px；
顶部：224px；
}
.人体svg#右侧{
左边距：66.5px；
顶部：224px；
z指数：10000；
}
.人体svg#左脚{
左边距：-35.5px；
顶部：455px；
}
.人体svg#右脚{
左边距：5.5px；
顶部：455px；
}

---

使用对象数组并不是一种非常有效的方法，但是如果这是您拥有的数据结构，那么您可以使用

Object.keys（）

和

Object.values（）

提取所需的信息

var body\u数据={
“头”：10，
“左肩”：20，
“右肩”：100，
“左臂”：50，
“右臂”：70，
“左手”：30，
“右手”：15，
“胸部”：30，
“胃”：80，
“左腿”：25，
“右腿”：17，
“左脚”：42，
“右脚”：100
};
功能渐变色（车身部分）{
变量名称=车身部件[0]；
var值=车身部件[1]；
颜色变异；
如果（值<25）{
color=“蓝色”；
}否则如果（值<50）{
color=“绿色”；
}否则{
color=“红色”；
}
var元素=document.getElementById（名称）；
if（元素）{
element.style.fill=颜色；
}
}
Object.entries（body_data）.forEach（gradientColor）
。人体{
宽度：207px；
位置：相对位置；
填充顶部：240px；
高度：260px；
显示：块；
利润率：40px自动；
}
.人体svg：悬停{
光标：指针；
}
.人体svg：悬停路径{
填充：#ff7d16；
}
.人体{
位置：绝对位置；
左：50%；
}
.人体svg#头部{
左边距：-28.5px；
顶部：-6px；
}
.人体svg#左肩{
左边距：-53.5px；
顶部：69px；
}
.人体svg#右肩{
左边距：13.5px；
顶部：69px；
}
.人体svg#左臂{
左边距：-78px；
顶部：112px；
}
.人体svg#右臂{
左边距：38px；
顶部：112px；
z指数：10001；
}
.人体svg#胸部{
左边距：-43.5px；
顶部：88px；
}
.人体svg#胃{
左边距：-37.5px；
顶部：130像素；
}
.人体svg#左腿{
左边距：-46.5px；
顶部：205px；
z指数：9999；
}
.人体svg#右腿{
左边距：1.5px；
顶部：205px；
z指数：9999；
}
.人体svg#左侧{
左边距：-102.5px；
顶部：224px；
}
.人体svg#右侧{
左边距：66.5px；
顶部：224px；
z指数：10000；
}
.人体svg#左脚{
左边距：-35.5px；
顶部：455px；
}
.人体svg#右脚{
左边距：5.5px；
顶部：455px；
}

谢谢！使用哪种数据结构更有效？单个对象可能是最简单的。e、 g.
var body_data={“头”：10，“左肩”：20，{“右肩”：100}，…}然后你可以用一个
来循环它，用于。。。在
循环中。我一直在尝试将您的逻辑应用到一个新函数，但我有点挣扎。你介意多给我一点帮助吗？我在你提供的文章结构中添加了数据，非常感谢！