我用相同的圖案填充了許多路徑。這些路徑在同一個類中。 我想單獨更改其中一個路徑中的圖案位置，將圖案放在我想要的位置，但不影響其他路徑中的圖案位置。我應該怎么做？

例如，這里我用一個圖案填充了三個矩形。我想通過拖動滑塊來改變rectA中圖案的位置。目前在我的代碼中，它將同時改變所有三個形狀中模式的位置。

<script src="https://unpkg.com/d3@5.15.1/dist/d3.min.js"></script>
<script src="https://unpkg.com/d3@5.15.1/dist/d3.min.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<svg width="300" height="100"> 
<defs>
  <pattern id="myPattern"
           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>
</defs>
  <rect id="rectA" class="myClass" x="0" y="0" width="100" height="100"
        style="stroke: #000000;" />   
  <rect id="rectB" class="myClass" x="100" y="0" width="100" height="100"
        style="stroke: #000000;" />   
  <rect id="rectC" class="myClass" x="200" y="0" width="100" height="100"
        style="stroke: #000000;" />   
</svg>

<p style=font-size:15px>Move Pattern in Rect A </p>
<input id="slider" type="range" min="0" max="100" value="5" step='1' >

<script>
  d3.selectAll(".myClass")
  .attr("fill", "url(#myPattern)")
  
  const slider = document.getElementById("slider")
  const myPattern = document.getElementById("myPattern")
  
  slider.oninput = function(){
    myPattern.setAttribute("patternTransform", "translate(0"+","+slider.value+") ")
  }
</script>

根本原因是特征碼id是全局id；第一個定義的id將設置所有形狀的圖案。

所以對每個模式使用一個唯一的模式id

或者將& ltsvg & gt在帶有shadowDOM的本地JavaScript Web組件(JSWC)中，

所以所有的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";
      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
            `<br><input type="range" min="0" max="100" value="5"               
                        oninput="this.getRootNode().host.transform(this.value)">`;

      this.transform(this.getAttribute("transform")||0);
    }
    transform(value) {
      this.shadowRoot
          .querySelector("pattern")
          .setAttribute("patternTransform", `translate(0 ${value})`)
    }
  })
</script>

您也可以輕松地創建& quot孩子& quot使用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>