是否可以通过编程控制 svg 图案的各个单元格的填充颜色？

Answer 1

仅当您自己在<pattern>内部创建所有

彩色形状时：

<svg-pattern colors="green,red,blue,yellow"></svg-pattern>
<svg-pattern colors="purple,hotpink,hotpink,purple"></svg-pattern>

<script>
  customElements.define("svg-pattern", class extends HTMLElement {
    connectedCallback() {
      let [fill1,fill2,fill3,fill4]= this.getAttribute("colors").split(",");
      let star = `v20h21v-20h-21zm15.4 18-5.3-2.8-5.3 2.8 1-5.9-4.3-4.2 5.9-.9 2.6-5.3 2.6 5.3 5.9.9-4.3 4.2 1 6z`;
      let id = "unique" + Math.random();
      this.innerHTML = 
`<svg width="160" style="display:inline-block" viewBox="0 0 200 200">
  <defs>
   <pattern id="${id}" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
     <g stroke="black" strokeWidth="0.5" >
       <path fill='${fill1}' d="m0   0 ${star}"/>
       <path fill='${fill2}' d="m20  0 ${star}"/>
       <path fill='${fill3}' d="m0  20 ${star}"/>
       <path fill='${fill4}' d="m20 20 ${star}"/>
     </g>
   </pattern>
  </defs>
  <g fill="url(#${id})">
    <circle cx="100" cy="100" r="100"/>
  </g>
</svg>`;
    }
  });
</script>