reactjs 如何使SVG的列车运行图可点击？

gzszwxb4 于 2023-01-04 发布在 React

关注(0)|答案(1)|浏览(137)

我有这个SVG方案

。
主要的问题是，SVG中有一个'g id='Numbers''，我不能改变数字的z索引，它们会干扰点击SVG。
我试图通过引用来解决这个问题

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;
}

reactjs

来源：https://stackoverflow.com/questions/74994499/how-to-make-svg-train-scheme-clickable

1条答案

按热度按时间

ajsxfq5m1#

SVG元素不考虑z-index。使用pointer-events单击text元素。

rect:hover{
  fill: orange
}

text:hover{
  fill: orange
}

<svg>
  <rect x="0" y="0" width="100" height="100" fill="red"/>
  <text x="5" y="50" font-size="25px" fill="blue">HOVER</text>
  <text x="5" y="70" font-size="25px" fill="blue">ME!</text>
</svg>

<svg>
  <rect x="0" y="0" width="100" height="100" fill="green"/>
  <text x="5" y="50" font-size="25px" fill="blue" pointer-events="none">HOVER</text>
  <text x="5" y="70" font-size="25px" fill="blue" pointer-events="none">ME?</text>
</svg>

赞(0）回复(0）举报 2023-01-04

我来回答

reactjs 如何使SVG的列车运行图可点击？

1条答案

相关问题

热门标签

最新问答