React 渲染 SVG 会覆盖页面上的其他 SVG

React 是一个流行的JavaScript 库，用于构建用户界面。它的一个强大功能是可以渲染 SVG（可缩放矢量图形），使开发人员可以创建复杂的图形和动画效果。然而，使用 React 渲染 SVG 时，可能会遇到一个问题：它会覆盖页面上的其他 SVG 元素。在本文中，我们将探讨这个问题，并提供解决方案。

jsx
import React from 'react';
function App() {
  return (
    
      
    
  );
}
export default App;

jsx
import React from 'react';
function App() {
  return (
    
      
        
      
      
        
      
    
  );
}
export default App;

jsx
import React from 'react';
function App() {
  return (
    
      
        
      
      
        
      
    
  );
}
export default App;

css
.svg1 {
  position: relative;
  z-index: 1;
}
.svg2 {
  position: relative;
  z-index: 2;
}