无id/class的相同rect标签x/y/width/height属性值修改方案咨询

嘿，这个需求完全可以实现！不需要修改源码添加id或class，我给你三个不同的方案，分别用CSS、jQuery和原生JavaScript来搞定，你可以根据自己的项目情况选择：

SVG的<rect>元素的x、y、width、height属性可以通过CSS来设置，我们可以用:nth-of-type()选择器根据元素的位置来定位每个rect：

/* 定位第一个rect */
rect:nth-of-type(1) {
  x: 10px;
  y: 10px;
  width: 50px;
  height: 5px;
}

/* 定位第二个rect */
rect:nth-of-type(2) {
  x: 30px;
  y: 20px;
  width: 40px;
  height: 5px;
}

/* 定位第三个rect */
rect:nth-of-type(3) {
  x: 10px;
  y: 30px;
  width: 50px;
  height: 5px;
}

需要注意的是：这种方式修改的是CSS层面的属性，不是SVG元素的原生属性。如果后续需要用JS读取这些属性值，拿到的还是原始的属性值，不是CSS修改后的。如果你的场景只需要视觉上的变化，这个方案足够简单。

如果你的项目已经在用jQuery，用它来修改SVG元素的原生属性非常方便，通过.eq(index)按索引定位每个rect，再用.attr()批量设置属性：

// 修改第一个rect（索引从0开始）
$('rect').eq(0).attr({
  'x': '10',
  'y': '10',
  'width': '50',
  'height': '5'
});

// 修改第二个rect
$('rect').eq(1).attr({
  'x': '30',
  'y': '20',
  'width': '40',
  'height': '5'
});

// 修改第三个rect
$('rect').eq(2).attr({
  'x': '10',
  'y': '30',
  'width': '50',
  'height': '5'
});

这个方案的好处是直接修改元素的原生属性，后续不管是查看DOM结构还是用JS读取属性，拿到的都是修改后的值。

如果不想依赖第三方库，原生JS同样能轻松实现。先获取所有rect元素，再通过索引或遍历的方式逐个修改属性：

基础写法 #

const rects = document.querySelectorAll('rect');

// 修改第一个rect
rects[0].setAttribute('x', '10');
rects[0].setAttribute('y', '10');
rects[0].setAttribute('width', '50');
rects[0].setAttribute('height', '5');

// 修改第二个rect
rects[1].setAttribute('x', '30');
rects[1].setAttribute('y', '20');
rects[1].setAttribute('width', '40');
rects[1].setAttribute('height', '5');

// 修改第三个rect
rects[2].setAttribute('x', '10');
rects[2].setAttribute('y', '30');
rects[2].setAttribute('width', '50');
rects[2].setAttribute('height', '5');

更简洁的批量写法（适合后续扩展） #

如果以后可能会增加更多rect，用配置数组+遍历的方式更易维护：

// 提前定义每个rect的属性配置
const rectConfigs = [
  {x: '10', y: '10', width: '50', height: '5'},
  {x: '30', y: '20', width: '40', height: '5'},
  {x: '10', y: '30', width: '50', height: '5'}
];

// 遍历所有rect，对应配置设置属性
document.querySelectorAll('rect').forEach((rect, index) => {
  const config = rectConfigs[index];
  if (config) {
    Object.keys(config).forEach(key => {
      rect.setAttribute(key, config[key]);
    });
  }
});

这种写法不需要重复写setAttribute，后续修改属性或者添加新的rect，只需要更新rectConfigs数组就行，非常灵活。

内容的提问来源于stack exchange，提问作者Knut Becker