如何在页面多次复用SVG时为不同路径设置不同颜色？

你之前的选择器无效，是因为<use>引用的SVG symbol内容处于独立的DOM上下文，外部CSS无法直接穿透选中内部的.sq1等类元素。不过可以通过CSS变量的继承特性实现需求，具体方案如下：

核心思路 #

利用CSS变量的继承性，给每个父容器（.div1/.div2等）设置专属的变量值，在SVG symbol内部的元素上绑定这些变量，这样每个SVG实例会继承所在容器的变量，从而呈现不同的高亮效果。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVGs</title>
    <style>
      :root {
        --colorSQ1: lightblue;
        --colorSQ2: lightblue;
        --colorSQ3: lightblue;
        --colorSQ4: lightblue;
      }

      /* 每个容器单独设置对应正方形的颜色 */
      .div1 { --colorSQ1: red; }
      .div2 { --colorSQ2: green; }
      .div3 { --colorSQ3: blue; }
      .div4 { --colorSQ4: yellow; }

      /* 确保SVG显示尺寸正常 */
      .dkarte {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>

  <body>
    <div style="display: none">
      <svg xmlns="http://www.w3.org/2000/svg">
        <symbol viewBox="0 0 200 200" id="4squares">
          <!-- 每个正方形的fill绑定对应的CSS变量 -->
          <g class="sq1">
            <rect id="sq-1" width="50" height="50" x="0" y="0" fill="var(--colorSQ1)" />
          </g>
          <g class="sq2">
            <rect id="sq-2" width="50" height="50" x="50" y="0" fill="var(--colorSQ2)" />
          </g>
          <g class="sq3">
            <rect id="sq-3" width="50" height="50" x="0" y="50" fill="var(--colorSQ3)" />
          </g>
          <g class="sq4">
            <rect id="sq-4" width="50" height="50" x="50" y="50" fill="var(--colorSQ4)" />
          </g>
        </symbol>
      </svg>
    </div>

    <section class="d-karte">
      <div class="div1" id="div1">
        <h4>squares I</h4>
        <div class="dkarte-box">
          <span><svg class="dkarte"><use href="#4squares"></use></svg></span>
        </div>
      </div>
      <div class="div2">
        <h4>squares II</h4>
        <div class="dkarte-box">
          <span><svg class="dkarte"><use href="#4squares"></use></svg></span>
        </div>
      </div>
      <div class="div3">
        <h4>squares III</h4>
        <div class="dkarte-box">
          <span><svg class="dkarte"><use href="#4squares"></use></svg></span>
        </div>
      </div>
      <div class="div4">
        <h4>squares IV</h4>
        <div class="dkarte-box">
          <span><svg class="dkarte"><use href="#4squares"></use></svg></span>
        </div>
      </div>
    </section>
  </body>
</html>

关键修改点说明 #

• 移除了symbol上的默认fill样式，改为给每个rect单独设置fill="var(--colorSQx)"，默认继承:root里的浅蓝色。
• 给每个.div1到.div4容器设置对应的变量值，比如.div1 { --colorSQ1: red; }，这样该容器下的SVG实例会继承这个变量，将sq1的颜色改为红色。
• 简化了xlink:href为href（现代浏览器已支持，更简洁）。
• 给.dkarte设置固定宽高，确保SVG显示尺寸符合预期。

为什么之前的选择器无效？ #

<use>元素会克隆symbol的内容到一个独立的Shadow DOM片段中，这个片段和主DOM树隔离，外部的CSS选择器（比如.div1 .dkarte .sq1）无法穿透到这个隔离的上下文里选中内部元素，所以直接用类选择器控制样式会失效。而CSS变量是可以通过DOM树继承的，所以能绕过这个限制。

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