根本原因是模式id是*全局*id;第一个定义的id将在所有图形上设置图案。

• 因此，请为每个模式使用唯一的模式id
• 或者使用shadowDOM将<svg>放置在本机Web组件中，

因此所有id值都是***本地***（对于shadowDOM）值：

<svg-squares></svg-squares>
<svg-squares transform="25"></svg-squares>
<svg-squares transform="66"></svg-squares>

<script>
  customElements.define("svg-squares", class extends HTMLElement {
    connectedCallback() {
      this.style.display = "inline-block";
      let slider = `<br><input type="range" min="0" max="100" value="5"               
                        oninput="this.getRootNode().host.transform(this.value)">`;

      this.attachShadow({mode:"open"})
          .innerHTML = `
<svg width="100" height="100"> 
<defs>
  <pattern id="P" width="40" height="40" patternUnits="userSpaceOnUse">
    <rect x="5" y="5" width ="30" height="30" fill="#87CEFA"/>
  </pattern>
</defs>
  <rect fill="url(#P)" width="100" height="100" stroke="black" x="0" y="0"/>   
</svg>` + slider;
      this.transform(this.getAttribute("transform")||0);
    }
    transform(value) {
      this.shadowRoot
        .querySelector("pattern")
        .setAttribute("patternTransform", `translate(0 ${value})`)
    }
  })
</script>

您还可以使用href属性轻松创建“子”模式。
因此，这些新模式是基于初始模式模板的，更重要的是与初始模式模板相关联。

<svg width="300" height="100">
  <defs>
    <pattern id="basePattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
      <rect id="rotateRect" x="5" y="5" width="30" height="30" fill="#87CEFA" />
    </pattern>
    <!-- child pattern will inherit graphics from base pattern -->
    <pattern id="childPattern" href="#basePattern" class="childPattern" style="color:blue" patternTransform="rotate(45) scale(0.25)" />
  </defs>
  <rect id="rectA" class="rect" x="0" y="0" width="100" height="100" style="stroke: #000000;" fill="url(#basePattern)"></rect>
  <rect id="rectB" class="rect" x="100" y="0" width="100" height="100" style="stroke: #000000;" fill="url(#childPattern)"></rect>
</svg>

实际上类似于<use>引用。但是在很多方面有很大的不同，因为引用的模式不能继承像填充颜色这样的属性。

<svg width="300" height="100">
  <defs>
    <pattern id="basePattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">

      <rect id="patternRect" x="5" y="5" width="30" height="30" fill=" #87CEFA " />

    </pattern>
  </defs>
  <rect id="rectA" class="rect" x="0" y="0" width="100" height="100" style="stroke: #000000;" />
  <rect id="rectB" class="rect" x="100" y="0" width="100" height="100" style="stroke: #000000;" />
  <rect id="rectC" class="rect" x="200" y="0" width="100" height="100" style="stroke: #000000;" />
</svg>

<p>
  A <input class="sliderPattern" id="sliderA" type="range" min="0" max="3" value="1" step='0.1'> B <input class="sliderPattern" id="sliderB" type="range" min="0" max="3" value="1" step='0.1'> C <input class="sliderPattern" id="sliderC" type="range" min="0"
    max="3" value="1" step='0.1'>
</p>
<p><button id="randomColor">Random Color (applied to base pattern)</button>
</p>

<script>
  const basePattern = document.getElementById("basePattern");
  const patternDefs = basePattern.closest('svg').querySelector('defs');
  const rects = document.querySelectorAll('.rect');
  const slider = document.getElementById("slider")
  //duplicate patterns
  for (let i = 0; i < rects.length; i++) {
    let rect = rects[i];
    let newPattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
    newPattern.id = "childPattern" + i;
    newPattern.setAttribute("href", "#basePattern");
    newPattern.classList.add("childPattern");
    rect.setAttribute('fill', `url(#childPattern${i})`);
    patternDefs.appendChild(newPattern);
  }
  const patterns = document.querySelectorAll('.childPattern');
  const sliders = document.querySelectorAll('.sliderPattern');
  sliders.forEach(function(slider, i) {
    slider.addEventListener("change", (e) => {
      let scale = e.currentTarget.value;
      let patternTransformBase = basePattern.getAttribute("patternTransform");
      patterns[i].setAttribute("patternTransform", patternTransformBase + ` scale(${scale})`)
    })
  });
  randomColor.addEventListener('click', (e) => {
    let random = Math.random();
    let newCol = `hsl(${180*random}deg 30% 60%)`;
    patternRect.style.fill = newCol
  });
</script>