title: Change position of pattern in one path but does not affect other pathes with the same pattern in svg
body: <p>I have filled lots of paths with a same pattern. These paths are in the same class.
  I want to change the position of the pattern in one of the paths individually, to put the pattern at the place I want, but do not affect the pattern position in the other paths. How should I do this?</p>
  <p>For example, here I have filled three rectangles with a pattern. I want to change the position of the pattern in rectA by dragging the slider. Currently in my code, it will change the position of the pattern in all three shapes at the same time.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/d3@5.15.1/dist/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/d3@5.15.1/dist/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://d3js.org/d3.v4.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;svg width="300" height="100"&gt; 
  &lt;defs&gt;
    &lt;pattern id="myPattern"
             x="0" y="0" width="40" height="40"
             patternUnits="userSpaceOnUse" patternTransform="rotate(0)"&gt;
  
      &lt;rect id="rotateRect" x="5" y = "5" width = "30" height = "30" fill = " #87CEFA "/&gt;
  
    &lt;/pattern&gt;
  &lt;/defs&gt;
    &lt;rect id="rectA" class="myClass" x="0" y="0" width="100" height="100"
          style="stroke: #000000;" /&gt;   
    &lt;rect id="rectB" class="myClass" x="100" y="0" width="100" height="100"
          style="stroke: #000000;" /&gt;   
    &lt;rect id="rectC" class="myClass" x="200" y="0" width="100" height="100"
          style="stroke: #000000;" /&gt;   
  &lt;/svg&gt;
  
  &lt;p style=font-size:15px&gt;Move Pattern in Rect A &lt;/p&gt;
  &lt;input id="slider" type="range" min="0" max="100" value="5" step='1' &gt;
  
  &lt;script&gt;
    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+") ")
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The result I want is like this:
  <a href="https://i.stack.imgur.com/NMsqm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NMsqm.png" alt="expected result" /></a></p>