Javascript 单击svg元素时应用焦点css

我有一个svg文件

我希望当我点击一个站点名称时，站点保持缩放

为此，我使用了

focus

方法，然后在CSS中使用选择器

：focused

应用效果

但这不起作用，什么都没有发生

ps：您可以忽略

forEach

循环，了解它并不重要

let stops=document.querySelector（“#stops”）；
//停止中的所有g元素
设gs=stops.querySelectorAll（“g”）；
//对于gs中的每个g
gs.forEach（g=>{
//此g元素中的矩形
设thisRect=g.querySelector（“rect”）；
//这个g元素中的圆
设此圆=g.querySelector（“圆”）；
//用于变换原点的圆心坐标
设x=thiscille.getAttribute（“cx”）；
设y=thiscille.getAttribute（“cy”）；
//组的边界框
设bb=g.getBBox（）；
//设置矩形的属性
thisRect.setAttributeNS（null，“x”，bb.x）；
thisRect.setAttributeNS（null，“y”，bb.y）；
thisRect.setAttributeNS（null，“宽度”，bb.width）；
thisRect.setAttributeNS（空，“高度”，bb.height）；
//为此组设置变换原点的值
g、 style.transformOrigin=`${x}px${y}px`；
})
document.getElementById（'g3670'）.focus（）
函数showmessage（）{
警报（“heloo”）；
}

文本{
字体系列：Lato；
字体大小：16px；
}
g*{指针事件：无；}
g rect{指针事件：all；}
#停止g{transform:scale（1）；cursor:pointer；}
#停止g:悬停{
变换：尺度（2）；
}
#停止g:激活{
变换：比例（2）
}

.cls-1{fill:none；笔划宽度：5px；}.cls-1.cls-2{stroke:a15256；}.cls-2{fill:fff；}.cls-3{isolation:isolation；字体大小：42.79px；字体系列：ArialMT，Arial；}
线
车站1
车站2
车站3

将

tabindex

添加到电台：

let stops=document.querySelector（“#stops”）；
//停止中的所有g元素
设gs=stops.querySelectorAll（“g”）；
//对于gs中的每个g
g.forEach（（g，i）=>{
g、 setAttribute（'tabindex'，i）；
//此g元素中的矩形
设thisRect=g.querySelector（“rect”）；
//这个g元素中的圆
设此圆=g.querySelector（“圆”）；
//用于变换原点的圆心坐标
设x=thiscille.getAttribute（“cx”）；
设y=thiscille.getAttribute（“cy”）；
//组的边界框
设bb=g.getBBox（）；
//设置矩形的属性
thisRect.setAttributeNS（null，“x”，bb.x）；
thisRect.setAttributeNS（null，“y”，bb.y）；
thisRect.setAttributeNS（null，“宽度”，bb.width）；
thisRect.setAttributeNS（空，“高度”，bb.height）；
//为此组设置变换原点的值
g、 style.transformOrigin=`${x}px${y}px`；
})
document.getElementById（'g3670'）.focus（）
函数showmessage（）{
警报（“heloo”）；
}

文本{
字体系列：Lato；
字体大小：16px；
}
g*{指针事件：无；}
g rect{指针事件：all；}
#停止g{变换：缩放（1）；光标：指针；变换：.3s}
#停止g:悬停{
变换：尺度（2）；
}
#g:聚焦{
大纲：0；
变换：比例（2）
}

.cls-1{fill:none；笔划宽度：5px；}.cls-1.cls-2{stroke:a15256；}.cls-2{fill:fff；}.cls-3{isolation:isolation；字体大小：42.79px；字体系列：ArialMT，Arial；}
线
车站1
车站2
车站3

我将这样做：单击时，我将为单击的组切换一个类

活动。在您的代码中，我添加了以下内容：

  g.addEventListener("click",()=>{
    g.classList.toggle("active")
  })

在forEach的
内


let stops=document.querySelector（“#stops”）；
//停止中的所有g元素
设gs=stops.querySelectorAll（“g”）；
//对于gs中的每个g
gs.forEach（g=>{
//此g元素中的矩形
设thisRect=g.querySelector（“rect”）；
//这个g元素中的圆
设此圆=g.querySelector（“圆”）；
//用于变换原点的圆心坐标
设x=thiscille.getAttribute（“cx”）；
设y=thiscille.getAttribute（“cy”）；
//组的边界框
设bb=g.getBBox（）；
//设置矩形的属性
thisRect.setAttributeNS（null，“x”，bb.x）；
thisRect.setAttributeNS（null，“y”，bb.y）；
thisRect.setAttributeNS（null，“宽度”，bb.width）；
thisRect.setAttributeNS（空，“高度”，bb.height）；
//为此组设置变换原点的值
g、 style.transformOrigin=`${x}px${y}px`；
g、 addEventListener（“单击”，（）=>{
g、 classList.toggle（“活动”）
})
})
document.getElementById（'g3670'）.focus（）
函数showmessage（）{
控制台日志（“heloo”）；
}
文本{
字体系列：Lato；
字体大小：16px；
}
g*{指针事件：无；}
g rect{指针事件：all；}
#停止g{transform:scale（1）；cursor:pointer；}
#停止g:悬停{
变换：尺度（2）；
}
#停止g.active{
变换：比例（2）
}

.cls-1{fill:none；笔划宽度：5px；}.cls-1.cls-2{stroke:a15256；}.cls-2{fill:fff；}.cls-3{isolation:isolation；字体大小：42.79px；字体系列：ArialMT，Arial；}
线
车站1
车站2
车站3
为此需要使用JavaScript，
：active
仅在按住鼠标按钮时应用样式。它不会在点击时切换。是的，我已经像他那样做了，但你应该在取消选择时处理。谢谢，这看起来很好