如何让SVG文本元素的鼠标点击事件覆盖CSS的Opacity与Fill属性？

你的需求是让SVG里的灰色W，鼠标悬停时显示，点击后保持黑色（即使鼠标移开）。当前代码存在两个核心问题：

1. getElementsByTagName返回的是元素集合，直接给svg绑定点击事件无法定位到单个W元素，给text集合直接修改样式也会报错
2. CSS的:active伪类仅在鼠标按下瞬间生效，松开后样式自动恢复，无法实现持久化状态

解决方案 #

用CSS类标记已点击的元素，配合JavaScript给每个W元素绑定点击事件来切换标记类，就能实现点击后持久变黑的效果：

1. 在SVG内部样式中新增.clicked类，定义点击后的黑色样式
2. 用querySelectorAll获取所有W元素，遍历绑定点击事件
3. 点击时切换元素的.clicked类（需要恢复灰色就用toggle，不需要恢复就用add）

完整可运行代码 #

HTML #

<div id='paper'>
  <svg version='1.1' width="595" height="842" xmlns="http://www.w3.org/2000/svg">
    <style>
      .text {
          font-family: Sans-serif;
          font-size: x-large;
          fill: #D3D3D3;
          opacity: 0;
          cursor: pointer; /* 替换none为pointer，提示元素可点击 */
      }

      .text:hover {
          opacity: 1;
      }

      /* 点击后持久生效的样式 */
      .text.clicked {
          fill: #000000;
          opacity: 1;
      }
    </style>

    <text x="70" y="97" class="text">W</text>
    <text x="70" y="100" class="text">W</text>
    <text x="70" y="103.5" class="text">W</text>
    <text x="70" y="107" class="text">W</text>
    <text x="70" y="110.5" class="text">W</text>
    <text x="70" y="114" class="text">W</text>
    <text x="70" y="117.5" class="text">W</text>
    <text x="70" y="121" class="text">W</text>
    <text x="70" y="124.5" class="text">W</text>
    <text x="70" y="128" class="text">W</text>
    <text x="70" y="131.5" class="text">W</text>
  </svg>
</div>

外部CSS #

div {
  border: 1px solid #000000;
}

JavaScript #

// 获取所有带.text类的W元素
const wElements = document.querySelectorAll('.text');

// 给每个W绑定点击事件
wElements.forEach(element => {
  element.addEventListener('click', () => {
    // 切换clicked类：点击变黑，再点击变回灰色
    element.classList.toggle('clicked');
    // 如果不需要恢复灰色，替换成：element.classList.add('clicked');
  });
});

内容的提问来源于stack exchange，提问作者Julia Andriessan