一个HTML页面上的两个SVG相互影响

<!-- SVG1 -->
<svg class="svg1">
  <!-- SVG内容 -->
</svg>

<!-- SVG2 -->
<svg class="svg2">
  <!-- SVG内容 -->
</svg>

.svg1 {
  /* 样式 */
}

.svg2 {
  /* 样式 */
}

<!-- SVG1 -->
<svg class="svg1">
  <circle id="circle1" cx="50" cy="50" r="40"></circle>
</svg>

<!-- SVG2 -->
<svg class="svg2">
  <rect id="rect1" x="10" y="10" width="80" height="80"></rect>
</svg>

document.getElementById('circle1').addEventListener('click', function() {
  console.log('Circle 1 clicked');
});

document.getElementById('rect1').addEventListener('click', function() {
  console.log('Rect 1 clicked');
});

<div class="svg-container">
  <svg class="svg1">
    <!-- SVG1内容 -->
  </svg>
  <svg class="svg2">
    <!-- SVG2内容 -->
  </svg>
</div>

(function() {
  var svg1Var = 'SVG1 Variable';
  // SVG1相关代码
})();

(function() {
  var svg2Var = 'SVG2 Variable';
  // SVG2相关代码
})();