如何在SVG中单独修改单个路径的Pattern位置而不影响同Pattern的其他路径

解决方案 #

核心思路是为需要单独控制的图形创建独立的Pattern副本，避免多个图形共享同一个Pattern资源，这样修改副本的属性就不会影响其他图形。

修改后的完整代码 #

<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，供rectB和rectC使用 -->
  <pattern id="myPattern"
           x="0" y="0" width="40" height="40"
           patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
    <rect x="5" y="5" width="30" height="30" fill="#87CEFA"/>
  </pattern>
  <!-- 为rectA创建专属的Pattern副本 -->
  <pattern id="myPatternForA"
           x="0" y="0" width="40" height="40"
           patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
    <rect 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">移动Rect A中的图案</p>
<input id="slider" type="range" min="0" max="100" value="5" step='1' >

<script>
  // 为不同图形分配对应的Pattern
  d3.select("#rectB, #rectC").attr("fill", "url(#myPattern)");
  d3.select("#rectA").attr("fill", "url(#myPatternForA)");
  
  const slider = document.getElementById("slider");
  const patternForA = document.getElementById("myPatternForA");
  
  slider.oninput = function(){
    // 仅修改rectA专属Pattern的位置变换
    patternForA.setAttribute("patternTransform", `translate(0, ${slider.value})`);
  }
</script>

关键说明 #

• SVG的Pattern是共享资源，所有引用同一个Pattern ID的图形会同步响应该Pattern的属性变化，这是原代码中所有图形同时改变的原因。
• 为目标图形创建独立的Pattern副本后，即可单独控制其patternTransform属性，不会影响其他使用原Pattern的图形。
• 如果需要批量处理大量图形，可以用JavaScript动态在<defs>中生成Pattern副本，减少重复代码。

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