如何实现SVG矩形重载时随机切换颜色？当前方法失效求助

嘿，我明白你现在的困扰——想让SVG里的rect元素在页面刷新时从指定颜色数组里随机挑一个填充色，但之前的实现没效果对吧？我来帮你分析原因并给出可行的解决方案。

首先看你提供的SVG代码片段，里面用CSS类.cls-1固定了fill颜色，这是静态的，自然没法动态随机切换。要实现这个效果，我们得用JavaScript来动态修改元素的填充属性。

具体步骤来啦： #

1. 准备颜色数组和获取目标元素 #

先定义你想要的颜色集合，然后精准获取SVG里的目标rect元素（注意要匹配正确的类名或ID哦）：

// 自定义你的颜色数组，想加多少颜色都可以
const colorOptions = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
// 获取目标rect，这里假设你用的是.cls-1类
const targetRect = document.querySelector('.cls-1');

2. 页面加载时执行随机换色逻辑 #

一定要确保DOM加载完成后再操作元素，不然会找不到目标rect。用DOMContentLoaded事件就很稳妥：

document.addEventListener('DOMContentLoaded', function() {
  const colorOptions = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
  const targetRect = document.querySelector('.cls-1');
  
  // 先检查元素是否存在，避免报错
  if (targetRect) {
    // 生成0到数组长度-1的随机索引
    const randomIdx = Math.floor(Math.random() * colorOptions.length);
    // 设置SVG的fill属性，直接覆盖CSS里的静态值
    targetRect.setAttribute('fill', colorOptions[randomIdx]);
    // 也可以用style.fill，效果一样：targetRect.style.fill = colorOptions[randomIdx];
  }
});

为啥之前的实现没生效？ #

我猜可能是这几个原因：

• 你之前只修改了CSS类的静态颜色，那每次加载都是固定值，根本不会随机变化；
• 脚本执行太早了，DOM还没加载完就运行，导致找不到rect元素；
• 选择器写错了，比如rect用的不是.cls-1类，那自然选不到目标元素。

完整的可运行示例 #

把脚本放在SVG后面或者HTML的<script>标签里就行，比如：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
  <defs>
    <style>
      .cls-1 { fill: #ff0000; /* 这里留个默认颜色，加载时会被JS覆盖 */ }
      .cls-2 { fill: #fff; }
    </style>
  </defs>
  <title>Logo MC</title>
  <g id="Ebene_2" data-name="Ebene 2">
    <g id="Ebene_1-2" data-name="Ebene 1">
      <rect class="cls-1" x="10" y="10" width="52" height="52" />
      <!-- 其他SVG元素继续放在这里 -->
    </g>
  </g>
</svg>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const colorOptions = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
  const targetRect = document.querySelector('.cls-1');
  
  if (targetRect) {
    const randomIdx = Math.floor(Math.random() * colorOptions.length);
    targetRect.setAttribute('fill', colorOptions[randomIdx]);
  }
});
</script>

这样每次刷新页面，你的rect就会从颜色数组里随机选一个填充色啦！如果有多个rect需要修改，只需要用document.querySelectorAll('.cls-1')拿到所有元素，然后遍历设置颜色就行。

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