如何让SVG列车示意图可点击？解决数字层干扰点击问题

问题说明 #

你的SVG里有个id为Numbers的<g>元素，数字层挡在前面，导致下层元素无法正常响应点击。你尝试用React refs给数字节点加CSS类设置z-index: -1，但这个方法在SVG里行不通。

你试过的代码：

React组件代码 #

import s from './styles.module.scss'

const ModifySVG = () => 
{
    if (ref.current !== null)
    {
          let seatsList = ref.current.querySelector('#Numbers').childNodes
          seatsList.forEach( (pathTag: any) => 
          {
             pathTag.setAttribute('class', s.numbers);
          })
    }
}    

CSS样式 #

.numbers{
  z-index: -1;
} 

可行解决方案 #

方案1：让数字层不响应鼠标事件（最简单） #

SVG里可以用pointer-events: none让元素忽略所有鼠标操作，点击会直接穿透到下层元素。不需要遍历子节点，直接给整个#Numbers分组加样式就行：

修改后的React代码：

import s from './styles.module.scss'

const ModifySVG = () => 
{
    if (ref.current !== null)
    {
          const numbersGroup = ref.current.querySelector('#Numbers');
          if(numbersGroup) {
              numbersGroup.classList.add(s.numbers);
          }
    }
}    

对应的CSS：

.numbers{
  pointer-events: none;
}

方案2：调整SVG元素的绘制顺序 #

SVG的层级是按代码里的先后顺序来的——先写的元素在下层，后写的在上层。如果要让数字层视觉上显示但层级在下方，把#Numbers移到SVG的最前面就行：

const ModifySVG = () => 
{
    if (ref.current !== null)
    {
          const svg = ref.current;
          const numbersGroup = svg.querySelector('#Numbers');
          if(numbersGroup && svg.firstChild) {
              svg.insertBefore(numbersGroup, svg.firstChild);
          }
    }
}

这个方法不需要额外CSS，纯DOM操作就能改层级。

为什么z-index没用？ #

SVG的z-index规则和HTML不一样：只有当元素处于同一个堆叠上下文（比如同属一个<g>、或者元素有transform/opacity这类属性）时，z-index才会生效。对于顶层的<g>元素，z-index没法改变它们的绘制顺序，真正说了算的是元素在SVG代码里的先后位置。

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