我是React的新手，目前正在开发一个交互式世界Map。我用的是inline svg。我添加了一些css，所以当我悬停在大陆上时，它们会变换：我意识到后面有一些大陆。当他们在上面盘旋时，他们会缩放，但看起来很奇怪。
在这里你可以看到欧洲、亚洲和非洲没有被盘旋。

当盘旋在亚洲上空时，你可以看到它的规模扩大，但它在非洲的后面

这是因为svg 1的渲染顺序。1
3.3渲染顺序
SVG文档片段中的元素具有隐式的绘制顺序，SVG文档片段中的第一个元素首先被“绘制”。后续图元将绘制在先前绘制的图元之上。
svg 1.% 1不支持z索引。我还没看过svg 2。0（这将支持z索引）据我所知。
所以我红了一些线程，关于如何有可能命令大陆悬停，使悬停的一个是在前面。
我找到了How to Bring svg Elements to the Front
然后开始尝试用React做这个。我在调用handleHover函数的路径上使用onMouseEnter事件，并在事件中传递，在函数内部，我调用currentTarget的parentElement属性，并调用currentTarget的appendChild。

function MapComponent() {

  function handleHover(event) {
    event.currentTarget.parentElement.appendChild(event.currentTarget);
  }

  return (
    <svg version="1.1" id="World" viewBox="0 0 1920 1080">
      <a href="/Australia" title="Australia" className="nav-link">
        <path
          id="Australia"
          onMouseEnter={(event) => handleHover(event)}
          d="..."
        />
      </a>
    </svg>
  );
}

但它并没有像预期的那样工作。当盘旋在路径（大陆）上时，它仍然在后面。
编辑：当用removeChild（）交换appendChild（）时，大陆在鼠标进入时消失。这说明选择了正确的元素。
我还尝试了完全不同的方法，如here（在第一个示例中）所解释的那样。不幸的是，这也不起作用。

const [isHovered, setHovered] = useState(false);

  return (
    <svg version="1.1" id="World" viewBox="0 0 1920 1080">
      <a href="/Australia" title="Australia" className="nav-link">
        <path
          id="Australia"
          onMouseEnter={() => setHovered(true)}
          onMouseLeave={() => setHovered(false)}
          d="..."
        />
        {isHovered && (
          <path
            id="Australia"
            onMouseEnter={() => isHovered(true)}
            onMouseLeave={() => isHovered(false)}
            d="..."
          />
        )}