如何在不影响Pattern的情况下修改带图案的SVG矩形背景色

我尝试修改一个填充了Pattern的SVG矩形的背景色。以下是定义了图案的简化SVG矩形代码：

<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" width="400" height="400" class="border">
    <defs>
       <pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="20" style="stroke:blue; stroke-width:8" />
       </pattern>
    </defs>

    <g>
       <rect width="100" height="100" fill="url(#diagonalHatch)"/>
    </g>
</svg>

能否在运行时修改该矩形的背景色，且不影响现有Pattern图案？比如让矩形背景为黄色、橙色或红色，同时保留蓝色斜线图案。

当然可以实现，下面是几种实用的方法：

方法1：分层矩形（最直观易维护） #

在现有图案矩形下方添加一个同尺寸的纯色矩形作为背景，运行时只需修改这个纯色矩形的fill属性，完全不会干扰上方的图案。

修改后的SVG：

<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" width="400" height="400" class="border">
    <defs>
       <pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="20" style="stroke:blue; stroke-width:8" />
       </pattern>
    </defs>

    <g>
       <!-- 背景矩形，给它加ID方便JS操作 -->
       <rect id="bgRect" width="100" height="100" fill="yellow"/>
       <!-- 原图案矩形 -->
       <rect width="100" height="100" fill="url(#diagonalHatch)"/>
    </g>
</svg>

JavaScript修改示例：

// 切换背景为橙色
document.getElementById('bgRect').setAttribute('fill', 'orange');

方法2：给Pattern添加背景层 #

直接在<pattern>内部添加一个纯色小矩形作为图案的背景，这样原矩形的fill依然使用该pattern，运行时修改pattern内的背景颜色即可。

修改后的SVG：

<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" width="400" height="400" class="border">
    <defs>
       <pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
          <!-- Pattern的背景矩形，尺寸要和pattern一致 -->
          <rect id="patternBg" width="10" height="10" fill="yellow"/>
          <line x1="0" y1="0" x2="0" y2="20" style="stroke:blue; stroke-width:8" />
       </pattern>
    </defs>

    <g>
       <rect width="100" height="100" fill="url(#diagonalHatch)"/>
    </g>
</svg>

JavaScript修改示例：

// 切换背景为红色
document.getElementById('patternBg').setAttribute('fill', 'red');

方法3：CSS背景叠加（适合嵌入页面的SVG） #

如果SVG是作为页面元素嵌入的，可利用CSS的background-color结合mix-blend-mode实现，前提是你的pattern只有线条（其余区域透明，原代码满足这个条件）。

CSS示例：

.border rect {
  background-color: yellow;
  mix-blend-mode: multiply;
}

JavaScript修改示例：

// 切换背景为橙色
document.querySelector('.border rect').style.backgroundColor = 'orange';

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