能否通过编程控制SVG图案中单个单元格的填充颜色？

要让SVG图案里的每个元素填充色能被灵活控制，核心是别把填充色硬编码在图案内部的元素上，下面给你两种可行的实现方式：

方法1：使用CSS自定义属性（推荐） #

通过CSS变量定义填充色，不管用CSS还是JS都能轻松修改：

<svg viewBox="200 190 500 500" id="example">
  <defs>
    <pattern id="patt" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <g stroke="black" strokeWidth="0.5" >
        <!-- 用CSS变量作为填充色，默认值为green -->
        <path id='a' fill='var(--fill-color, green)'  d="M0,0.054V20h21V0.054H0z M15.422,18.129l-5.264-2.768l-5.265,2.768l1.006-5.863L1.64,8.114l5.887-0.855 l2.632-5.334l2.633,5.334l5.885,0.855l-4.258,4.152L15.422,18.129z"/>
      </g>
    </pattern>
  </defs>
  <!-- 在应用图案的元素上设置CSS变量 -->
  <g fill="url(#patt)" stroke="orange" style="--fill-color: green" >
    <circle cx="450" cy="300" r="100"/>
  </g>
</svg>

用JS动态修改颜色 #

添加一段JS代码，就能通过交互修改填充色：

// 获取SVG元素
const svg = document.getElementById('example');
// 示例：点击按钮修改颜色
document.querySelector('#changeColorBtn').addEventListener('click', () => {
  // 生成随机十六进制颜色
  const randomColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;
  svg.style.setProperty('--fill-color', randomColor);
});

方法2：继承外部填充色 #

如果不需要默认颜色，也可以直接让图案内的元素继承外部的填充设置，移除内部的fill属性即可：

<svg viewBox="200 190 500 500" id="example">
  <defs>
    <pattern id="patt" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <g stroke="black" strokeWidth="0.5" >
        <!-- 移除硬编码的fill值，继承外部颜色 -->
        <path id='a'  d="M0,0.054V20h21V0.054H0z M15.422,18.129l-5.264-2.768l-5.265,2.768l1.006-5.863L1.64,8.114l5.887-0.855 l2.632-5.334l2.633,5.334l5.885,0.855l-4.258,4.152L15.422,18.129z"/>
      </g>
    </pattern>
  </defs>
  <!-- 这里的填充规则会被图案内的path继承 -->
  <g fill="url(#patt)" stroke="orange" >
    <circle cx="450" cy="300" r="100"/>
  </g>
</svg>

说明 #

你提供的原始代码里，path直接写死了fill='green'，导致颜色无法从外部修改。上面两种方法都打破了这个限制，让你能灵活控制图案内元素的填充色。

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